CSS的样式居中总结

一、父容器宽度确定时水平居中

（1）通过margin: 0 auto; text-align: center实现CSS水平居中。 这种方法是实现CSS水平居中最最常用的，我在前端开发中大概有60%的CSS水平居中就是通过“margin: 0 auto; text-align: center”实现的。

（2）通过display:flex实现CSS水平居中。 随着越来越多兼容flexbox，所以通过“display:flex”实现CSS水平居中的方案也越来越受青睐。通过display:flex实现CSS水平居中的原理是父元素display:flex;flex-direction:column;而子元素align-self:center;这个跟CSS垂直居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。

（3）通过display:table-cell和margin-left实现CSS水平居中。 对于父元素和子元素的宽度都确定的情况，适合通过display:table-cell和margin-left实现CSS水平居中。使用时，父元素display:table-cell，子元素给剩余宽度一半的margin-left。

（4）通过position:absolute实现CSS水平居中。 这种方法跟上一个方法适用场景一样，也是适用于父元素和子元素的宽度都确定的情况。使用时，父元素position:absolute，子元素给剩余宽度一半的margin-left。

（5）通过width:fit-content实现CSS水平居中。 这种方法可以确保子元素宽度不确定的情况下，也能实现CSS水平居中。需要注意的是，需要配合“margin: 0 auto; text-align: center”使用。

二、父容器宽度不确定时水平居中

（1）position:relative:left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);//这里的50%是指盒子本身的50%;

（2） width:fit-content;width:-moz-fit-content;width:-webket-fit-content;margin:auto;

三、水平垂直居中

（一）脱离文档流元素 **1、margin:auto法**

CSS代码：

div{ width: 300px; height: 300px; position: relative; border: 1px solid #465468; } img{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; }

HTML代码：

<div> <img src="prince.png"> </div>

（2） 负margin法

CSS代码：

.container{ width: 500px; height: 400px; border: 2px solid #379; position: relative; } .inner{ width: 480px; height: 380px; background-color: #746; position: absolute; top: 50%; left: 50%; margin-top: -190px; /*height的一半*/ margin-left: -240px; /*width的一半*/ }

HTML代码：

<div class="container"> <div class="inner"></div> </div>

（二）未脱离文档流元素的居中

（1）table-cell法

div{ border: 3px solid #555; width: 300px; height: 200px; display: table-cell; vertical-align: middle; text-align: center; } span{ vertical-align: middle; }

HTML代码：

<div> <span>这是放在span中的文字，通过外层div设置display: table-cell以及vertical-align: middle实现垂直居中。</span> </div>

（2）弹性盒子法

CSS代码：

.container{ width: 300px; height: 200px; border: 3px solid #546461; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .inner{ border: 3px solid #458761; padding: 20px; }

HTML代码：

<div class="container"> <div class="inner"> 我在容器中水平垂直居中 </div> </div>