CSS元素居中方法汇总

写在前边

在平时写页面布局的时候，我们经常会遇到设置元素水平居中或者垂直居中的情况，这时，我们就需要根据遇到的实际情况选择处相应的更为合适的设置元素居中的方法。经过查阅资料，集合自己的理解，特意把元素居中的内容整理出来，分享给大家。但愿可以对大家有所帮助。

一、水平居中

inline或者inline-*元素

对于父元素是块级元素的内联元素来说，你只需要这么做：
.center-children {
text-align:center
}
这种方法可以让 inline/inline-block/inline-table/inline/flex 等类型的元素实现居中。
单个块级元素

当某个块级元素的宽度width已知的时候，可以通过设置其左外边距margin-left和右外边距margin-right值为auto来实现元素的水平居中。例如我们经常会使用的：
.wrapper{
margin: 0 auto;
}
当块级元素宽度未知时，也可以利用定位先让其向右移动其父元素高度的一半，然后再向左移动自身宽度的一半即可。
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
另外：请注意，不要使用float把一个元素居中！尽管，这儿有个小技巧

多个块级元素

如果你想让两个或者两个以上的块级元素在一行上面水平居中，那么最好的办法是改变他们display的类型。下面有两个例子，一个使用inline-block，另一个使用flex。
demo在这里

当然，如果你的意思是让多个块级元素堆积叠加显示在一条竖列上，那么设置左右外边距的值为auto这一方法依然有效。

二、垂直居中

`inline`或`inline-*`元素

单行

对于单行行内或者文本元素，只需为它们添加相同的padding-top和 padding-bottom 就可以实现垂直居中，对于存在奇数值的情况，只能上下差一像素了，不过一般也不影响。
a{
padding-top: 10px;
padding-bottom: 10px;
}
当因为某些原因，设置padding成为一个不可选选项，而你又需要居中一些不需要换行的文本时，将line-height和height设为相同的值就是一个不错的选择。例如：
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}

多行

将上下内边距设置为相同大小从而使得单行文本垂直居中，这一方法对多行文本同样有效。但是，如果在某些情况这一方法失效了怎么办？也许，可以通过使用表格元素或者使用CSS，将这些文本元素显示在一个表格单元格内（table cell）。在这种情况下，使用vertical-algin属性处理居中与它通常在一行中处理元素的居中有所不同。（查看更多关于vertical-algin的知识点，看这儿戳这里

demo戳这里

此外，你还可以使用flexbox实现垂直居中，对于父级容器为 display: flex; 的元素来说，它的每一个子元素都是垂直居中的：

.flex-center-vertically {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 400px;
}

demo戳这里

注意上述方法只适用于父级容器拥有确定高度(px, %, etc)的元素。

如果上述方法都不起作用，那么你就需要使用被称为幽灵元素（ghost element）的非常规解决方式：在垂直居中的元素上添加伪元素，设置伪元素的高等于父级容器的高，然后为文本添加vertical-align: center;样式，即可实现垂直居中。

.ghost-center {
	position: relative;
}
.ghost-center::before {
	content: " ";
	display: inline-block;
	height: 100%;
	width: 1%;
	vertical-align: middle;
}
.ghost-center p {display: inline-block;
	vertical-align: middle;
	
}

demo戳这里

块级元素

已知高度的块级元素

无法获知元素的具体高度是非常常见的一种状况，比如：视区宽度变化，会触发布局重绘，从而改变高度；对文本施加不同的样式会改变高度；文本的内容量不同会改变高度；当宽度变化时，对于宽高比例固定的元素（比如图片），也会自动调整高度。

在块级元素高度已知的情况下，可以这样来实现垂直居中：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* 如果未使用 `box-sizing: border-box;` 则需要考虑border和padding*/
}
高度未知的块级元素

在不知道元素高度的情况，依然可以做到垂直居中，即通过定位的方法，先让下移其父级高度的一半，再向上移动其自身高度的一半即可。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
demo戳这里

使用flexbox

这种情况下使用flexbox会很方便

.parent {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

demo戳这里

三、水平居中&垂直居中

在了解了上边的内容之后，你可以很自由地将上述各种方法进行组合来同时实现元素的水平和垂直居中。

不过，一般较为常用的是下面三种方法：

元素具有固定的宽度和高度

这种情况下使用负外边距，将其值设为宽度和高度的一半。这样，在你将元素在绝对定位并且设置50%和50%的上/左偏移后，元素位置将居中。这一方法是跨浏览器支持的。
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
demo戳这里
元素宽度和高度未知

如果你不知道元素的宽度或者高度，你可以使用transform属性，即translate(-50%, -50%)，在横向、纵向上都偏移自身高度的一半以居中。这一偏移是基于浏览器计算后得到的元素自身的宽度和高度。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
demo戳这里
使用flexbox

要在flexbox中是的两个方向上都居中，你需要使用两个居中属性:
.parent {
display: flex;
justify-content: center;
align-items: center;
}
demo戳这里

好了，以上就是关于CSS设置元素水平居中和垂直居中的方法汇总，愿所有的元素居中都能够快速而又顺利的实现！

原文翻译自https://css-tricks.com/centering-css-complete-guide/

写在前边

一、水平居中

二、垂直居中

inline或inline-*元素

块级元素

三、水平居中&垂直居中

`inline`或`inline-*`元素