【翻译】CSS水平和垂直居中的12种方法

英语原文链接

在CSS中有许多不同的方法能够做到水平和垂直居中，但很难去选择合适的那个。我会向你展示我所看到的所有的方法，帮助你在所面对的情境下选择最棒的那一个。

方法1

此方法将只能垂直居中单行文本。只需将行高设置为对象的高度，文本就会居中。

content

CSS:

.container {
height: 100px;
line-height: 100px;/与div等高/
}
优点：
1.兼容所有浏览器
2.当没有足够的空间时，文字不会被切断

缺点：
1.只对文本有效（不能块级元素）
2.当为多行文字而不只一行时（如文字换行），这种方法破坏十分严重

此方法对小的元素非常有用，比如将按钮或单行文本字段中的文本垂直居中。

方法2

此方法使用绝对定位的div，它的top为50%，上边距设置为内容高度一半的负值。这意味着对象必须有一个固定的高度，这是被CSS定义了的。因为它有一个固定的高度，你可能需要给容器div设置overflow：hidden，因此如果内部有太多的内容时，滚动条就会出现，而不是内容在在div外继续排列！

content

CSS:

.container {
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;/* 负的高度的一半 */
}
优点：
1.兼容所有浏览器
2.不需要嵌套的标签

缺点：
1.当没有足够的空间时，内容会消失（比如当div在body内部并且用户缩小浏览器窗口，滚动条不会出现）

我们可以修改上面的CSS代码使div垂直和水平居中。
CSS:

wrap {

width: 200px;
height:200px;
position: absolute;
left: 50%;
margin-left: -100px;/* 宽度/2 */
top:50%;
margin-top: -100px;
}

方法3

此方法设置一些div的display和table类似，所以我们可以使用table的veitical-align属性（这个属性对其他元素的效果很不一样）。

content

CSS:

container {

height: 300px;
display: table;
}
#content {
display:table-cell;
vertical-align: middle;
}
优点：
1.内容可以动态改变高度（这样不用一定得在CSS中定义）
2.当容器没有足够的空间时，内容不会被切断。

缺点：
1.IE低版本不支持
2.需要很多嵌套的标签（真的不好，这是一个很主观的话题）

由于这种方法不支持ie6-7，所以如果你想解决这个问题，只需添加一个新的div来使用hack方式。

content

CSS:

.table {
height: 300px;/
width: 300px;
display: table;
position: relative;
float:left;
}
.tableCell {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 10px;
*position: absolute;
*top: 50%;
*left: 50%;
}
.content {
*position:relative;
*top: -50%;
*left: -50%;
}

方法4

在这种方法中，我们将在内容元素前加一个div。这个div将设置为height:50%;并且margin-bottom为内容高度的一半。然后内容清除浮动，内容将会居中。
你应该注意到，如果内容元素在body内，我们需要设置height:100%。

Content section

CSS:

html,body {height: 100%;}
#floater{
float:left;
height:50%;
margin-bottom: -120px;/240px/2/
}
#content {
clear:both;
height: 240px;
position: relative;
}
优点：
1.兼容所有浏览器
2.当没有足够的空间（即窗口缩小）时我们的内容不会被切断，滚动条会出现。

缺点：
1.需要一个额外的空元素

[查看demo]( http://jsbin.com/faqimif/1/edit?html ,css,output)

方法5

该方法设置一些div来像table一样显示，所以我们可以像方法3一样使用table的vertical-align属性，但是对于IE，我们需要添加一个inline水平的标签，块级水平的标签是没有任何用的。

Centering multiple lines
in a block

container.

CSS:

优点：
内容可以动态改变高度

缺点：
很多嵌套标签

方法6

此方法设置display:inline-block，添加父元素的高度为固定数值或百分比。

I am vertically centered!

CSS:

优点：
兼容所有浏览器

缺点：
需要添加父级的高度，并为IE写一个hack，另外，需要很多标签。

[查看demo]( http://jsbin.com/cenefib/1/edit?html ,css,output)

方法7

该方法用于多行文本和高度是可变的时候，我们需要设置给顶部和底部同样的padding。

test

CSS:

.item {padding-top:30px;padding-bottom:30px;}
优点：
简单且兼容所有浏览器

缺点：
如果高度是固定的，此方法无效的。

方法8

现在让我们来看看如何使用jQuery来居中。

Centered in the middle of the page with jQuery

CSS:

.container{
background-color:#338BC7;
width:270px;
height:150px;
}

jQuery:

$(document).ready(function(){
$(window).resize(function(){
$('.container').css({
position:'absolute',
left: ($(window).width() -$('.container').outerWidth())/2,
top: ($(window).height() - $('.container').outerHeight())/2
});
})
$(window).resize();
});
优点：
简单且兼容所有浏览器

缺点：
需要jQuery，如果JavaScript被禁用将会失效

方法9

在这种方法中，我们使用CSS3的新属性：flexbox。

CSS:

{
margin: 0;
padding:0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
width: 100%;/for firefox*/
}
优点：
简单且在响应式设计中效果十分棒

缺点：
在有些浏览器中不起作用，因为其不支持flexbox

方法10

如果网站有弹窗，我们不知道它的大小，但我们总是希望它能在大多数的设备里居中。

Popup title

pop up in the window

CSS:

*{
margin: 0;
padding:0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.container {
border: 1px solid #bbb;
border-radius: 5px;
box-shadow: 0 0 3px rgba(0,0,0,.5);
position:absolute;
top:50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.content-header {
padding: 10px 20px;
background: rgba(0,0,0,.25);
color:#fff;
}
.content-body{
padding: 20px;
background: #fff;
}
优点：
总是以不同的设备屏幕为中心

缺点：
实现有一点难，在一些浏览器中无效

方法11

在这种方法中，我们使用伪元素（:before和:after）来垂直居中网站中的对象。

Make it centered in the window

CSS:

*{
margin:0;
padding:0;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
html,
body {
height:100%;
}
div {
display:inline-block;
vertical-align: middle;
width: 99.5%;
}
body:after {
content:"";
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0px;
}
优点：
在现代浏览器中工作得很好

缺点：
复杂和更多的CSS代码。

方法12

这个方法，我认为是使对象在网站中垂直居中最简单的方法。

Make it centered in the window

CSS:

center {

position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin: auto;
}
优点：
容易，在现代浏览器中工作得很好

缺点：
也需要height: 100%;(其实是指用absolute定位需要，用fixed定位不需要)

兼容性注意事项

正如你所知，IE是唯一给你带来问题的主要浏览器，你需要测试IE的旧版本去解决兼容性问题。

结论

除了上面我收集的，还有其他的一些方法可以做到垂直和水平居中的网站，如果你有其他的方法，请在评论区分享。