水平垂直居中常见解决方案

水平和垂直居中元素的几种常用方法

一、水平居中

1、行内元素

对于行内元素，如果要水平居中，很简单，使用text-align属性即可：

text-align:center;

二、块元素

1.定宽块元素水平居中

margin:0 auto;

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

方法一将要居中的元素放到table的一个td标签中

原因是table不是块元素，它不会占满整行，其宽度是由内容来撑开的，此时可以设置table的

margin:0 auto;

缺点是增加了无语义标签

方法二改变块元素属性为inline

这样其父元素就可以使用text-align:center居中内部元素

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

我们想要使inner(不定宽)水平居中于outer，可以这么做：

先在inner外面再加一层div:

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

起初盒子是这样的：

CSS这么写：

.wrap{
   float:left;
   position:relative;
   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浮动了，应该清除浮动。

二、垂直居中

1、单行文本

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

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

方法一：

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

vertical-align:middle;

其实默认就是这样。vertical-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; //上移自身高度的一半

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%; 
}

参考：http://www.lvyestudy.com/web/web0041.aspx