CSS居中方式有哪些？

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居中方式有哪些？的詳細內容。更多資訊請關注PHP中文網其他相關文章！