本文整理了网页布局中水平垂直居中的若干种方法，小伙伴如有其他方案，请在评论区指出，我会加到文章中并注明你的昵称。
先上一张思维导图，让大家一目了然，然后再逐条讲解。
为避免重复代码过多，本文所有内容都以下面这个代码结构为基础，后续只会贴出核心代码。
<style>
.container {
width: 600px;
height: 600px;
background: yellow;
}
.content {
width: 200px;
height: 200px;
background: green;
}
</style>
<body>
<div class="container">
<div class="content"></div>
</div>
</body>
宽高固定
水平居中
1.相对定位
相对定位会占据原本的文档流，left 父元素宽度的 1/2 - 自身宽度的 1/2。
.content {
position: relative;
left: 200px;
}2.绝对定位
子绝父相，left 父元素宽度的 1/2 - 自身宽度的 1/2。
.container {
position: relative;
}
.content {
position: absolute;
left: 200px;
}3.transform
利用 CSS3 的 transform ，translateX 父元素宽度的 1/2 - 自身宽度的 1/2。
.content {
transform: translateX(200px);
}4.margin
margin-left 父元素宽度的 1/2 - 自身宽度的 1/2 。
.content {
margin-left: 200px;
}垂直居中
1.相对定位
相对定位会占据原本的文档流，top 父元素高度的 1/2 - 自身高度的 1/2。
.content {
position: relative;
top: 200px;
}2.绝对定位
子绝父相，top 父元素高度的 1/2 - 自身高度的 1/2。
.container {
position: relative;
}
.content {
position: absolute;
top: 200px;
}3.transform
利用 CSS3 的 transform ，translateY 父元素高度的 1/2 - 自身高度的 1/2。
.content {
transform: translateY(200px);
}4.margin
margin-top 父元素高度的 1/2 - 自身高度的 1/2 ，要注意解决边距重叠问题。
.container {
overflow: hidden;
}
.content {
margin-top: 200px;
}水平垂直居中
1.相对定位
相对定位会占据原本的文档流，left 父元素宽度的 1/2 - 自身宽度的 1/2，top 父元素高度的 1/2 - 自身高度的 1/2。
.content {
position: relative;
left: 200px;
top：200px；
}2.绝对定位
子绝父相，left 父元素宽度的 1/2 - 自身宽度的 1/2，top 父元素高度的 1/2 - 自身高度的 1/2。
.container {
position: relative;
}
.content {
position: absolute;
left: 200px;
top：200px；
}3.transform
利用 CSS3 的 transform ，translateX 父元素宽度的 1/2 - 自身宽度的 1/2，translateY 父元素高度的 1/2 - 自身高度的 1/2。
.content {
transform: translateX(200px) translateY(200px);
}4.margin
margin-left 父元素宽度的 1/2 - 自身宽度的 1/2，margin-top 父元素高度的 1/2 - 自身高度的 1/2 ，要注意解决边距重叠问题 。
.container {
overflow: hidden;
}
.content {
margin-left: 200px;
margin-top: 200px;
}宽高不固定
水平居中
1.margin 0 auto
.content {
margin: 0 auto;
}2.flex布局
.container {
display: flex;
justify-content: center;
}3.gird布局
.container {
display: grid;
justify-content: center;
}4.另外一种gird布局
.container {
display: grid
}
.content {
justify-self: center;
}
5.绝对定位 + margin
.container {
position: relative;
}
.content {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}6.绝对定位 + transform
.container {
position: relative;
}
.content {
position: absolute;
left: 50%;
transform: translateX(-50%);
}7.display: inline-block
.container {
text-align: center;
}
.content {
display: inline-block;
}8.display: box
.container {
display: -webkit-box;
-webkit-box-pack: center;
}9.table布局
.container {
display: table-cell;
text-align: center;
}
.content {
display: inline-block;
}垂直居中
1.flex布局
.container {
display: flex;
align-items: center;
}
2.gird布局
.container {
display: grid;
align-items: center;
}
3.另外一种gird布局
.container {
display: grid
}
.content {
align-self: center;
}4.绝对定位 + margin
.container {
position: relative;
}
.content {
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}5.绝对定位 + transform
.container {
position: relative;
}
.content {
position: absolute;
top: 50%;
transform: translateY(-50%);
}6.writing-mode + text-align
.container {
writing-mode: vertical-lr;
text-align: center;
}
.content {
display: inline-block;
}
7.writing-mode + margin
.container {
writing-mode: vertical-lr;
}
.content {
margin: auto 0;
}8.vertical-align + line-height
.container {
line-height: 600px;
}
.content {
display: inline-block;
vertical-align: middle;
}9.display: box
.container {
display: -webkit-box;
-webkit-box-align: center
}10.table布局
.container {
display: table-cell;
vertical-align: middle;
}
.content {
display: inline-block;
}水平垂直居中
1.flex布局
.container {
display: flex;
align-items: center;
justify-content: center;
}2.gird布局
.container {
display: grid;
align-items: center;
justify-content: center;
}3.另一种grid布局
.container {
display: grid
}
.content {
align-self: center;
justify-self: center;
}4.绝对定位 + transform
.container {
position: relative;
}
.content {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}5.绝对定位 + margin
.container {
position: relative;
}
.content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}6.flex + margin
.container {
display: flex;
}
.content {
margin: auto;
}7.转换成行内元素
注：table 标签也可以实现，但是依靠的也是 text-align: center 属性，就不单独列出来了。
.container {
line-height: 600px;
text-align: center;
display: inline-block;
}
.content {
display: inline-block;
vertical-align: middle;
line-height: initial;
}8.伪元素
.container {
text-align: center;
}
.container::before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.content {
display: inline-block;
vertical-align: middle;
}注：::after 也可以实现，但是思路是一样的，就不单独列出来了。
9.display:box
这是 flex 布局的前身，但是也能用。
.container {
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center
}10.table布局
.container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.content {
display: inline-block;
}
