如何实现一个元素的水平垂直居中
更多描述 要求对行内元素、块状元素及不定宽高的块状元素均可适用：
可打开 codepen 进行调试: https://codepen.io/shanyue/pen/XWMdabg (opens in a new tab)，以下是布局代码
<div class="container">
<div class="item" style="width: 100px; height: 100px; background: #999;">
块状元素
</div>
</div>
<div class="container">
<div class="item">不定高宽的块状元素</div>
</div>
<div class="container">
<span class="item">行内元素</span>
</div>.container {
// 把代码写在这里
}
.container {
height: 20rem;
background: #ccc;
margin: 1rem;
}Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 10 (opens in a new tab)
Author 回答者: woohs (opens in a new tab)
绝对定位方法：
.box {
postion: absolute;
top: 50%;
bottom: 50%;
width: 50px;
height: 50px;
transform: translate(-50%, -50%);
}
<body>
<div class="box"><div>
</body>flex方法：
body {
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 50px;
height: 50px;
}
<body>
<div class="box"><div>
</body>Author 回答者: shfshanyue (opens in a new tab)
提供一些现代浏览器下使用 flex/grid 的方法，不仅支持块状元素，而且支持行内元素，对固定高宽与不固定高宽皆可使用。
使用 flex，以下是经典的垂直居中。
.container {
display: flex;
justify-content: center;
align-items: center;
}使用 grid，它是做二维布局的，但是只有一个子元素时，一维布局与二维布局就一样了。
结合 justify-content/justify-items 和 align-content/align-items 就有四种方案
效果可以见 codepen (opens in a new tab)
.container {
display: grid;
justify-content: center;
align-content: center;
}.container {
display: grid;
justify-content: center;
align-items: center;
}.container {
display: grid;
justify-items: center;
align-content: center;
}.container {
display: grid;
justify-items: center;
align-items: center;
}三个属性略显啰嗦，其实只需两个属性即可:
.container {
display: grid;
place-items: center;
}.container {
display: grid;
place-content: center;
}Author 回答者: SageSanyue (opens in a new tab)
引自：https://css-tricks.com/centering-css-complete-guide/ (opens in a new tab) 1 该元素的宽高固定吗？ 在将元素绝对定位为top: 50%; left: 50%;后，可以使用值为宽的一半和高的一半的负margin实现垂直水平居中。（跨浏览器支持很不错）
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}2 该元素宽高未知？ （1）如果宽高未知，在将元素绝对定位为top: 50%; left: 50%;后，可以使用transform属性来做负的50%移动（基于当前元素宽高）。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}（2）也可以元素相对父容器绝对定位(left: 0;right: 0;top: 0;bottom: 0;)并margin: auto，不需要提前知道尺寸兼容性好。
.container {
position: relative;
height: 300px;
border: 1px solid red;
}
.item {
width: 100px;
height: 50px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
border: 1px solid green;
}3 你要用flexbox吗？ 对flexbox进行垂直水平居中，只需设置两个属性为center: align-items、justify-content。
.parent {
display: flex;
justify-content: center;
align-items: center;
}4 你要用grid布局吗？ 父容器设置为grid布局后，子元素直接margin: auto;即可实现垂直水平居中。
body, html {
height: 100%;
display: grid;
}
span { /* thing to center */
margin: auto;
}详细案例解释可参考：https://zhuanlan.zhihu.com/p/87134477 (opens in a new tab)
Author 回答者: lastSeries (opens in a new tab)
你不知道的 flex 布局～
.box {
display: flex;
}
.item {
margin: auto;
}Author 回答者: shfshanyue (opens in a new tab)
你不知道的 flex 布局～
.box { display: flex; } .item { margin: auto; }
这个方法眼前一亮，试了一下: 行内元素与块状元素均可，学习了！
Author 回答者: babycannotsay (opens in a new tab)
你不知道的 flex 布局～
.box { display: flex; } .item { margin: auto; }这个方法眼前一亮，试了一下: 行内元素与块状元素均可，学习了！
https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/ (opens in a new tab)