搞定div水平居中，N种方案大揭秘！

div水平居中的N种方法

一、单行垂直居中

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。

div{

height:25px;

line-height:25px;

overflow:hidden;

}

这段代码很简单，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，达不到垂直居中的效果。

单行文字实现垂直居中

body{font-size:12px;font-family:tahoma;}

div{

height:25px;

line-height:25px;

background-color:#FFCCFF;

}

二、多行未知高度文字的垂直居中

如果一段内容，它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法，就是设定Padding，使上下的padding值相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把

div{

padding:25px;

line-height:30px;

}

优点：它可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。

三、多行文本固定高度的居中

CSS中的vertical-align属性只应用于inline level, inline-block level及table-cells元素上；其次vertical-align的对齐就基于每个line box（行框）的。但是在CSS中还有一个display属性能够模拟，所以我们可以使用这个属性来让

就可以使用vertical-align了。

注意：display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个

#wrap {

display:table;

width:100%;

background-color:#FFCCFF;

}

#content {

display:table-cell;

vertical-align:middle;

height:500px;

}

来看例子：

多行文字实现垂直居中

#wrap {

display:table;

width:100%;

background-color:#FFCCFF;

}

#content {

display:table-cell;

vertical-align:middle;

text-align:center;

height:400px;

}

现在我们要使这段文字垂直居中显示！

content可以动态改变高度(不需在 CSS 中定义)。当wrap里没有足够空间时，content不会被截断 。

这个方法应该是很理想了，但是只能在IE8及以上浏览器以及非IE浏览器下才能看到效果

参考链接

五、多行文本垂直水平的居中(未知宽高)

#content{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

}

利用了transform: translate(-50%, -50%);

示例如下：

多行文字实现垂直居中

#content {

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

height:400px;

width:400px;

background-color:#FFCCFF;

}

Content Here

六、多行文本固定宽高的居中

#content {

background:#ddd;

position:absolute;

top:50%;

left:50%;

width:200px;

height:100px;

margin-left:-100px;

margin-top:-50px;

/* negative half of the width */

/* negative half of the height */

}

示例如下：

多行文本固定高度的居中

#content {

background:#ddd;

position:absolute;

top:50%;

left:50%;

width:200px;

height:100px;

margin-left:-100px;

margin-top:-50px;

}

Content Here

优点：适用于所有浏览器、不需要嵌套标签

缺点：没有足够空间时，content会消失(类似div 在body内，当用户缩小浏览器窗口，滚动条不出现的情况)

七、多行文本固定宽高的居中

这个方法使用了一个position:absolute，有固定宽度和高度的div。这个div被设置为top:0;bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此margin:auto;会使它居中。使用margin:auto;使块级元素垂直居中是很简单的。

#content {

position:absolute;

top:0;

bottom:0;

left:0;

right:0;

margin:auto;

height:240px;

width:70%;

}

示例如下：

多行文本固定高度的居中

#content {

position:absolute;

top:0;

bottom:0;

left:0;

right:0;

margin:auto;

height:240px;

width:70%;

background:#ddd;

}

Content Here

优点：简单

缺点：IE(IE8 beta)中无效；无足够空间时，content 被截断，但是不会有滚动条出现

参考链接

八、居中一个浮动元素

奇怪怎么让一个浮动元素居中，不过还是奉上代码直接看效果吧

HTML:

居中居中居中居中居中居中
居中居中居中居中居中居中居中居中居
中居中居中居中居中居中居中居中居中居
中居中居中居中居中居中居中

CSS:

.wrap{

float:left;

width:100%;

height:400px;

background-color:#ccc;

}

.ele{

float:left;

position:relative;

left:50%;

top:50%;

}

.ele-inner{

position:relative;

left:-50%;

-webkit-transform:translate3d(0,-50%,0);

transform:translate3d(0,-50%,0);

background-color:#333;

color:#fff;

}

这种方法的原理，首先是利用float属性将需要居中的元素的父元素.ele的宽度收缩，然后left:50%将.ele的左边和水平中线对齐，这个时候还没居中，还需要将其往回拉自身宽度的50%，于是.ele-inner便是真正需要水平居中的元素，我给它一个position:relative，将其往回拉自身宽度50%就行了。对于垂直方向，依然是先将.ele top:50%到垂直方向中点，但是这时给.ele-inner top:50%是不起作用的，因为如果没给父元素明确高度的话，这个50%是计算不出来的，因此，就有了transform : translate3d(0, -50%, 0)。

这种方法的好处是元素可以不定宽，任何时候都可以做到居中。

缺点：当居中元素的父元素left:50%时，如果元素宽度足够大，会超出外面的容器，而如果外面的容器又正好是overflow:auto的话，那就会在外面产生滚动条。

九、inline-block实现 未知尺寸元素水平垂直居中

CSS探索之旅

inline-block的前世今生

十、text-align:center + absolute

text-aign:center本来是不能直接作用于absolute元素的，但是没有给其left等值的行级absolute元素是会受文本的影响的

HTML

center + absolute

CSS(less)

.wrap{

text-align:center;

width:100%;

height:400px;

background-color:#ccc;

font-size:0;

}

.ele{

position:absolute;

margin-left:-(100px/2);

margin-top:(400px-100px)/2;

width:100px;

height:100px;

display:inline-block;

background-color:#333;

color:#fff;

font-size:18px;

}