CSS實現水平居中的幾種方法


一、對於行內元素

 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>

 

 

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM