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

英语原文链接

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

方法1

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

<div class="container">content</div>

CSS:

.container {
	height: 100px;
	line-height: 100px;/*与div等高*/
}

优点：

1.兼容所有浏览器

2.当没有足够的空间时，文字不会被切断

缺点：

1.只对文本有效（不能块级元素）

2.当为多行文字而不只一行时（如文字换行），这种方法破坏十分严重

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

方法2

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

<div class="container">content</div>

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属性（这个属性对其他元素的效果很不一样）。

<div id="container">
	<div id="content">content</div>
</div>

CSS:

#container {
	height: 300px;
	display: table;
}
#content {
	display:table-cell;
	vertical-align: middle;
}

优点：

1.内容可以动态改变高度（这样不用一定得在CSS中定义）

2.当容器没有足够的空间时，内容不会被切断。

缺点：

1.IE低版本不支持

2.需要很多嵌套的标签（真的不好，这是一个很主观的话题）

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

<div class="table">
	<div class="tableCell">
		<div class="content">content</div>
	</div>
</div>

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%。

<body>
	<div id="floater"><!--This block have empty content --></div>
		<div id="content">Content section</div>
</body>

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

方法5

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

<p class="table">
	<span class="tableCell">Centering multiple lines <br>in a block 

container.</span>
	<!--[if lte IE 7]><b></b><![endif]-->
</p>

CSS:

<style type="text/css">
.table {
	border: 1px solid orange;
	display: table;
	height: 200px;
	width: 200px;
	text-align: center;
}
.tableCell {
	display: table-cell;
	vertical-align: middle;
}
</style>
<!--[if lte ie 7]>
<style type="text/css">
.tableCell {
	display: inline-block;
}
b {
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	width: 1px;
}
</style>
<![endif]-->

优点：

内容可以动态改变高度

缺点：

很多嵌套标签

方法6

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

<div id="parent">
	<div id="vertically_center">
		<p>I am vertically centered!</p>
	</div>
	<div id="extra"><!-- ie comment --></div>
</div>

CSS:

<style type="text/css">
html,
body{
	height: 100%;
}
#parent {
	height: 500px;
	border: 1px solid red;
}
#vertically_center,
#extra {
	display: inline-block;
	vertical-align: middle;
}
#extra {
	height: 100%;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
/*IE6-7not  support display:inline-block,so we need a hack*/
#vertically_center,
#extra {
	display: inline;
	zoom: 1;
}
#extra {
	width: 1px;
}
</style>
<![endif]-->

优点：

兼容所有浏览器

缺点：

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

查看demo

方法7

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

<div class="columns">
	<div class="item">test</div>
</div>

CSS:

.item {padding-top:30px;padding-bottom:30px;}

优点：

简单且兼容所有浏览器

缺点：

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

方法8

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

<div class="container">
	<p>Centered in the middle of the page with jQuery</p>
</div>

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。

<body>
    <img src="//vertical.jpg" alt="flexbox way" />
</body>

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

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

<div class="container">
    <div class="cotent-header">Popup title</div>
    <div class="content-body">pop up in the window</div>
</div>

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）来垂直居中网站中的对象。

<body>
    <div>Make it centered in the window</div>
</body>

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

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

<body>
    <div>Make it centered in the window</div>
</body>

CSS:

#center {
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin: auto;
}

优点：

容易，在现代浏览器中工作得很好

缺点：

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

兼容性注意事项

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

结论

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