在我们进行网站布局的时候，总是遇到让已知宽高元素和为止宽高元素水平垂直居中，下面就这问题我总结的几种方法。
1.让已知宽度和高度的元素水平垂直居中：
方法一：使用负外边距和百分比居中
将已知宽高的元素设置为据对定位，将left和top设置为父元素的一半即50%，此时元素的左上角的点位于父元素的中心点，这是将元素向左和向上分别移动元素的宽、高一半，margin-left：宽/2; margin-top:高/2; 最后将元素的中心点与父元素的中心点重合，即元素水平垂直居中。
#inner{ 400px; height: 300px; background: #0099FF; position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -200px; overflow: auto; /* overflow属性介绍： visible 内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，但是浏览器不会显示供查看内容的滚动条。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 由浏览器决定如何显示。如果需要，则显示滚动条。*/ } <body> <div id="inner"> </div> </body>
方法二：使用绝对定位水平垂直居中
将元素设置为absolute定位，设置top、right、bottom和left的值都为0px；利用margin的自适应来使得元素水平垂直居中。
#inner{
400px;
height: 300px;
background: #09F;
position: absolute;
top: 0px; bottom: 0px;
left: 0px; right: 0px;
margin: auto;
overflow: auto;
}
<body>
<div id="inner"></div>
</body>
方法三：用元素绝对定位浏览器中水平垂直居中
将元素设置为fiexd定位，设置top、right、bottom和left的值都为0px；利用margin的自适应来使得元素水平垂直居中。
.fixd{ 400px; height: 300px; position: fixed; background-color: #0000FF; z-index: 999; top: 0px; bottom: 0px; left: 0px; right: 0px; overflow: auto; margin: auto; } <body> <div class="fixd"></div> </body>
1.让未知宽度和高度的元素水平垂直居中：
方法一：利用display: table-cell让元素渲染为表格单元格
利用display的table-cell属性将未知宽高的元素渲染成为表格单元格的形式，然后设置文本 text-align:center;水平居中； vertical-align:middle; 垂直居中。注意要将元素设置为inline-block类型。
.out{ 600px; height: 600px; background: #AEC1CC; display: table-cell; /*display:table-cell;属性值可以让元素渲染为表格单元格 */ text-align:center; vertical-align:middle; } .inner{ background: red; display: inline-block; }
方法二：transform:translate()水平垂直居中
一般使用百分比单位的时候都是相对父元素来计算的但是在css里面有个比较特殊的属性是相对自身宽高来计算的。那就是transform:translate();所以利用百分比将元素左上角设置为父元素的中心点，再利用translate()将元素向上和向左移动一半。
.out{ 300px; height: 300px; background: #AEC1CC; position: absolute; } .inner{ background: red; position: absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } <div class="out"> <div class="inner"> 两行文字居中<br/> 第二行 </div> </div>
方法三：vertical-align:middle水平垂直居中
将添加一个元素让他的高度自适应为父元素的高度。最后将未知宽高的元素看做一个整体相对于父元素垂直居中。
.inner{ background: red; display: inline-block; } .out{ 400px; height: 400px; background: #AEC1CC; text-align:center; } .ex{ /*利用一个没有宽度b标签来实现水平垂直居中*/ display: inline-block; *display:inline; *zoom:1; height: 100%; 0px; vertical-align:middle; } <div class="out"> <b class="ex"></b> <div class="inner"> 两行文字居中<br/> 第二行 </div> </div>