一 仅水平居中
1 行内元素
1)给父元素添加 text-align:center 即可
<div class="parent">
<span class="child">我是子元素</span>
</div>
.parent {
width: 200px;
background-color: red;
text-align: center;
}
.child {
background-color: green;
}
image
2）父元素添加 width：fit-content； 和 margin：auto 。
DOM结构不变。
.parent {
width: fit-content;
margin: auto;
background-color: red;
}
.child {
background-color: green;
}
image
2 块级元素
1）子元素加 margin：0 auto
<div class="parent">
<div class="child">我是子元素</div>
</div>
.parent {
background-color: red;
}
.child {
margin: 0 auto;
background-color: green;
width: 100px;
text-align: center;
}
image
二 仅垂直居中
1 行内元素
1）line-height与height值保持一致即可【仅对单行文本生效】。
.parent {
background-color: red;
height: 200px;
line-height: 200px;
}
.child {
background-color: green;
}
image
三 水平、垂直均居中
1 块级元素
1）"子绝【绝对absolute】父相【相对relative】"。
条件：必须知道 子元素的宽、高。
<div class="parent">
<div class="child">我是子元素</div>
</div>
【Tip：以下均是这个DOM结构】
.parent {
background-color: red;
width: 200px;
height: 300px;
position: relative;
}
.child {
background-color: green;
width: 100px;
height: 200px;
position: absolute;
/* 50%是基于父元素的 高度，100px是 子元素高度 的一半 */
top: calc(50% - 100px);
/* 50%是基于父元素的 宽度，50px是 子元素宽度 的一半 */
left: calc(50% - 50px);
}
image
2）定位 + transform 。
.parent {
background-color: red;
width: 200px;
height: 300px;
position: relative;
}
.child {
background-color: green;
position: absolute;
/* 下面2个50%，使得子元素的左上角点在父元素的正中心了 */
top: 50%;
left: 50%;
/* 下面2个-50%【分别以子元素的宽、高为基准】，平移后便在父元素的正中间了 */
transform: translate(-50%, -50%);
}
image
3）定位 + margin 。
.parent {
background-color: red;
width: 200px;
height: 300px;
position: relative;
}
.child {
background-color: green;
/* 这里的 width、height 要设值，不然子元素可能会填满父元素 */
width: 100px;
height: 200px;
/* 原理：子元素就会填充父元素的所有可用空间，所以，在水平垂直方向上，就有了可分配的空间 */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
image
image
4）父元素设置 padding 值。
.parent {
background-color: red;
padding: 10px 20px;
}
.child {
background-color: green;
}
image
5）父元素 display：flex 。
.parent {
background-color: red;
width: 200px;
height: 300px;
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
}
.child {
background-color: green;
}
image
6）父元素为 table-cell 布局。
<div class="parent">
<!-- span比div效果明显 -->
<span class="child">我是子元素</span>
</div>
.parent {
background-color: red;
width: 200px;
height: 300px;
/* display: table-cell 将parent模拟成一个表格单元格【td标签】 */
display: table-cell;
/* 水平居中 */
text-align: center;
/* 垂直居中 */
vertical-align: middle;
}
.child {
background-color: green;
}
7）其他的也可以实现，但是可能适用性、理解难度较大，所以暂时不列出～
四 总结
1 思维导图【方便记忆～】：
image
2 本文章只是简单说了实操部分，它们更深入的原理没有讲解，大家感兴趣的话可以自己私底下去搜索相关资料 或 底下评论与交流～
五 更多
1）本人是20届本科生，大厂、创业公司都待过，现在是BAT的1名前端工程师(目前正往“全栈”方向发展，已开始写公司里的部分后端代码~)。
2）以下是个人整理的一些笔记和书籍（永久有效链接: https://pan.baidu.com/s/1SPc3umO6cZlBtoPylSaHzw 密码: eqee ，若失效的话可以到vx公众号 “码农三少” 回复 pdf 以进行最新资料的获取）：
个人技术笔记(350+算法题解、前端重点面经汇总、图解HTTP等).png
理财书籍pdf.png
技术书籍pdf.png
