CSS實現水平居中的幾種方法
阿新 • • 發佈：2021-10-12
一、對於行內元素
1、text-aligin實現水平居中
text-aligin：center
二、對於確定寬度的塊級元素
2、margin實現水平居中
margin:0 auto
3、絕對定位absolute和margin-left實現水平居中
1 .one { 2 width: 400px; 3 position: absolute; 4 margin-left: -200px;//該元素寬度的一半 5 }
三、對於未知寬度的塊級元素
4、CSS3通過flex實現水平居中
1 <style> 2 .big { 3 display: flex; 4 flex-direction: column;//父元素 5 } 6 .one { 7 align-self: center;//子元素 8 } 9 </style> 10 <body> 11 <div class="big"> 12 <div class="one">子元素</div> 13 </div> 14 </body>
5、要居中的元素設定table標籤配合margin左右auto實現
1 <style> 2 .big { 3 width: 900px; 4 height: 300px; 5 background-color: #d72e2e; 6 } 7 .one { 8 width: 100px; 9 height: 100px; 10 background-color: bisque; 11 display: table; 12 margin-left:auto; 13 margin-right: auto; 14 } 15 </style> 16 <body> 17 <div class="big"> 18 <div class="one">子元素</div> 19 </div> 20 </body>