居中在平时的运用很多，以下简单做了一些总结。
1.块级元素居中
统一 html 格式如下：
<div class="container">
<div class="content">content</div>
</div>
居中效果如下：
居中效果
1.1 relaive 居中
1.1.1 已知父元素子元素高度
.container{
width: 300px;
height: 300px;
background-color: aquamarine;
overflow: hidden; /*或 position: 'absolute' 触发BFC */
}
.content{
width: 80px;
height: 80px;
background-color: blueviolet;
position: relative;
margin: 110px auto;
}
1.1.2 未知父元素高度，已知子元素宽度、高度
.container {
width: 300px;
height: 300px;
background-color: aquamarine;
overflow: hidden;
}
.content {
width: 80px;
height: 80px;
background-color: blueviolet;
position: relative;
margin: 50%;
top: -40px;
left: -40px;
}
1.1.3 未知父元素高度，未知子元素宽度，已知子元素高度
.container {
width: 300px;
height: 300px;
background-color: aquamarine;
overflow: hidden;
}
.content {
width: 80px;
height: 80px;
background-color: blueviolet;
position: relative;
margin: 50% auto;
top: -40px;
}
1.2 absolute 居中
1.2.1 已知父元素、子元素宽高度
.container {
width: 300px;
height: 300px;
background-color: aquamarine;
overflow: hidden;
position: relative;
}
.content {
width: 80px;
height: 80px;
background-color: blueviolet;
position: absolute;
top: 50%;
left: 50%;
margin-left: -40px;
margin-top: -40px;
}
也可结合 transform
.container {
width: 300px;
height: 300px;
background-color: aquamarine;
overflow: hidden;
position: relative;
}
.content {
width: 80px;
height: 80px;
background-color: blueviolet;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
1.2.2 未知父元素、子元素宽高度
.container {
width: 300px;
height: 300px;
background-color: aquamarine;
overflow: hidden;
position: relative;
}
.content {
width: 80px;
height: 80px;
background-color: blueviolet;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
1.3 flex 居中
.container {
width: 300px;
height: 300px;
background-color: aquamarine;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.content {
width: 80px;
height: 80px;
background-color: blueviolet;
}
2. 块级元素内容居中
统一 html 格式如下：
<div class="container">
<div class="content">块级元素内容居中</div>
</div>
居中效果如下：
image
2.1 flex 布局
.container {
width: 80px;
height: 80px;
background-color: blueviolet;
color: #fff;
display: flex;
align-items: center;
text-align: center;
}
2.2 模拟 table
.container {
width: 80px;
height: 80px;
background-color: blueviolet;
color: #fff;
display: table;
text-align: center;
}
.content { /*也可用于行内元素内容居中*/
background-color: blueviolet;
display: table-cell;
vertical-align: middle;
}
3 行内元素内容居中
3.1 水平居中： text-align:center；
3.2 垂直居中：
3.2.1 父元素高度确定的单行文本（内联元素）：height = line-height；
3.2.2.父元素高度确定的多行文本（内联元素）:
- 父元素
display:table； - 子元素设置
display:table-cell ; vertical-align:middle
