- 水平居中（行内元素水平居中、块级元素水平居中）
- 垂直居中
- 水平垂直居中
行内元素水平居中
text-align: center
<div class="container">hello world</div>
.container {
text-align: center
}
适用情况：
- 行内元素，包括：文字、按钮、图片等
- display: inline、inline-block、inline-table、inline-flex的块级元素（注：此时，width/height不生效哦~）
块级元素水平居中
margin: 0 auto;
<div class="container">
<div class="son">hello world</div>
</div>
.son {
width: 100px;
margin: 0 auto;
}
适用情况：
- 子元素必须设置宽度，即定宽。（否则，宽度默认为100%，就不存在居中一说）
display: table
<div class="container">
<div class="son">hello world</div>
</div>
.son {
display: table;
margin: 0 auto;
}
原因：
利用table的长度自适应，即使不定义长度，会根据其内容的长度来定义宽度，而不是默认为100%的宽度。在某种意义上来说，也是一种定宽。
块级元素垂直居中
-
单行文字居中
<div class="container"> <div class="son">hello world</div> </div> .container { height: 100px; line-height: 100px; } -
多行文字居中
<div class="container"> <div>hello world</div> <div>hello world</div> <div>hello world</div> </div> .container { height: 500px; display: table-cell; vertical-align: middle; }
块级元素水平垂直居中
flex布局（推荐使用）
<div class="container">
<div>hello world</div>
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
}
适用范围：
- 不定宽高
绝对定位 + transform属性
<div class="container">
<div class="son">hello world</div>
</div>
.container {
position: relative;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
- 在translate中使用-50%，是相对于子元素本身的宽度，不要与下面的margin混淆。
- 不定宽高
绝对定位 + margin
<div class="container">
<div class="son">hello world</div>
</div>
.container {
height: 500px;
width: 500px;
position: relative;
}
.son {
position: absolute;
height: 100px;
width: 100px;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
注意：
在margin 中不能使用-50%，因为在这里相对的父元素百分比，如果使用了 margin: -50% 0 0 -50%; 则子元素还是会回到左上角。
适用范围：
- 子元素定宽
绝对定位
<div class="container">
<div class="son">hello world</div>
</div>
.container{
width: 500px;
height: 500px;
background: red;
position: relative;
}
.son{
height: 100px;
width: 100px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: yellow;
}
适用条件
- 父子元素都必须定宽
