CSS置中方式總結

標籤：建議   ext   str   idt   span   使用   效果   item   ati   

1.text-align:center;

　　使用以上方式置中是將父級容器中display:inline;的行內元素或者文字進行水平置中。

2.inline-height:(height)值;

　　使用inline-height時經常和height一起使用，使得內容垂直方向上置中，建議在列表內部的li中使用；

3.margin:auto;

　　使用margin來置中時，一般是在元素給出了確切的width值，設定margin:auto; 或者 margin: 0 auto; 是一樣的效果：當前的元素將水平置中；

　　使用margin時，也可以設定 margin-left和margin-right的值相等，也能實現水平置中；

4.position定位置中

　　根據top和left或者bottom、right進行設定，可使元素水平、垂直置中；但是父級元素必須設定高度；

5.Flex盒子

　　Flex容器的flex-align:center;

　　　　　　　align-items:center;

　　　　　　　justify-cotent:center;

　　項目屬性的align-self:center;

6.負值margin：

 1 .box { 2     width: 600px; 3     height: 400px; 4     position: relative; 5 }  6  7 .box1 { 8     width: 300px; 9     height: 200px;10     padding: 20px;11     position: absolute;12     top: 50%;13     left: 50%;14     margin-left: -170px;/*(width+padding)/2 */15     margin-top: -120px;/*(height+padding)/2 */16 } 

　　以上代碼可實現元素的水平垂直置中。

CSS置中方式總結