垂直和水平居中方法小结

水平居中

行内元素

text-align:center;

块元素

1.定宽块元素水平居中

 margin:0 auto;

2.不定宽块元素水平居中

方法一：利用浮动的包裹性和百分比相对定位

<div class='outer'>   <div class='inner'></div></div>

我们想要使inner(不定宽)水平居中于outer，可以这么做：
先在inner外面再加一层div:

<div class='outer'>   <div class='wrap'>      <div class='inner'></div>   </div></div>

起初盒子是这样的：

CSS这么写：

.wrap{   float:left;   position:absolute;   left:50%;}.inner{   position:relative;  //为啥用absolute没用啊   left:-50%;}

wrap设置为float的原因是形成包裹，把inner包裹住，此时浮动元素wrap的宽和高都是有内部元素inner撑开的，不再是占满整行。也就是说wrap的宽和inner的宽相等。

position:relative设置百分比意思是相对于父元素宽度的百分之几。此时，wrap的左边缘距离outer的左边缘是outer.width的一半，也就是说wrap的左边缘在outer的中线上。

但是我们想要inner的中线和outer的中线重叠，那么就需要inner再往左移动它自身宽度的一半，但是它自身的宽度不知道啊，这就是为什么需要再加一层wrap且wrap要浮动（包裹）的原因，可根据“relative设置百分比意思是相对于父元素宽度的百分之几”这个规则。由于wrap的宽度和inner的相等，50%就是inner的宽度的50%。

这个方法也有缺点，由于wrap浮动了，应该清除浮动。

方法二：将要居中的元素放到table的一个td标签中
原因是table不是块元素，它不会占满整行，其宽度是由内容来撑开的，此时可以设置table的

margin：0 auto;`

即可。
缺点是增加了无语义标签。

方法三 改变块元素属性为inline或者inline-block
这样其父元素就可以使用text-align:center居中内部元素

垂直居中

单行文本

设置父元素的height和line-height相等。

父元素高度确定的多行文本、图片、块元素

方法一：
将要垂直居中的元素放到table的td中，然后对td设置：

verticle-align:middle;

其实默认就是这样。verticle-align只适用于 inline level, inline-block level 及 table-cells 元素上。

方法二：
在chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。可以不用table-row这一层，直接外层table，内层table-cell就能实现内层元素中的内容垂直居中。例如下面的toCenter想要在box中垂直居中，需要设置box为table-cell，这样就可以激活其vertical-align：

<div class="box">  <div class="toCenter">       我想要在父元素中垂直居中显示  </div></div>.box{display: table-cell;width:200px;height:200px;background: pink;vertical-align: middle;}.toCenter{width:100px;height:100px;background: purple;}

缺点：ie6和ie7并不支持display:table-cell。

方法三：要居中的元素高度确定
1.利用定位

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

CSS代码为：

.outer{    background:#FFCCCC;    border:1px solid #000;    position:relative;  }.inner{    width:100px;    height:100px;    background:#CCFF66;    position:absolute;    top:50%;  //父元素高度的一半    margin-top:-50px;  //上移自身高度的一半             }

为啥垂直居中不可以像水平居中方法一一样啊？

.inner{    position:relative;     top:-50%;}

没有用???

2.在要居中元素之前添加一个浮动块，再设置该块的margin-bottom

<div class="box">  <div class="floater"></div>  <div class="toCenter">     我想要在父元素中垂直居中显示  </div></div>.box{width:500px;height:500px;}.toCenter{width:100px;height:100px;position: relative;clear: both} //清除浮动.floater{height: 50%;float:left;margin-bottom: -50px}//下边距为 -要居中元素高度的一半

方法四 父元素的上下padding值设为一样
当父元素的高度未设置时，将父元素的上下padding值设置为一样就可以让其内部的块元素垂直方向上看上去居中了。

方法五

.box{position:relative;}.toCenter{    position:absolute;     top:0;     bottom:0;     left:0;     right:0;     margin:auto;     height:240px;     width:70%; }

方法六 使用box属性
父元素设置：

display:box;box-align:center;  //将剩余空间均分到子元素上下两侧

参考资料：
未知宽度水平居中的几种方法
CSS实现垂直居中的5种方法

待看资料: CSS 元素垂直居中的 6种方法