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 } 

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