【翻译】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的旧版本去解决兼容性问题。

结论

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