编辑排版 | 宋大狮
平台运营 | 小唐狮
ONE 问题描述
2023年5月6号记，久违了大家。
今天要和大家分享的是关于如何实现元素的垂直水平居中。
最近在整理有关CSS的公司真实面试题，但因为五一假期的原因，进度一直被延误。今天，分享一下整理的成果之一，关于项目中常用的，元素垂直水平居中的实现方式。
具体的需求：按元素分类列举、把常用和不常用的实现方式分开、尽量全面。
具体的问题：1、元素分类有哪些；2、每种元素如何实现，哪些实现方式又是最常用的、最好用的。
今天，我们就在这篇文章，用最简洁的语言，来好好地理理上述问题。
TWO 问题解决
一、代码总览
最好用的元素垂直水平居中的代码如下，复制即可直接使用！
【最好用的垂直居中方式】
1、两行代码实现。将父元素设置为 Flex 布局，再给要居中的子元素添加margin：auto。
2、对于 行元素、行块元素、块元素 都适用。
<body>
<div class="fatherDiv">
<div class="sonDiv">哈哈哈哈</span>
</div>
</body>
<style>
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
}
/* 子元素 */
.sonDiv {
background-color: pink;
margin: auto;
}
</style>
二、问题解析
1、问：元素分类有哪些？
答：
块元素，display: block; ，自己独占一行，并且可以设置宽高；
行块元素，display: inline-block; ，在同一行显示，并且可以设置宽高；
行元素，display: inline; ，在同一行显示，并且不可以设置宽高。
2、问：每种元素如何实现，哪些实现方式又是最常用的、最好用的？
答：
行元素：
1、text-align + line-height
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
text-align: center;
line-height: 500px;
}
/* 子元素 */
.sonDiv {
background-color: pink;
display: inline;
}
2、display: table-cell;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: table-cell;
text-align: center;
vertical-align: middle;
}
/* 子元素 */
.sonDiv {
background-color: pink;
display: inline;
}
3、display: flex;【好用】
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
}
4、display: flex;【好用】
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
margin: auto;
}
5、position: absolute;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
6、position: absolute;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
7、position: absolute;【好用】
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
8、display: grid;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
margin: auto;
}
9、display: grid;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
}
行块元素：
1、text-align + line-height + vertical-align
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
text-align: center;
line-height: 500px;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
vertical-align: middle;
}
2、display: table-cell;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: table-cell;
text-align: center;
vertical-align: middle;
}
/* 子元素 */
.sonDiv {
background-color: pink;
display: inline-block;
}3、display: flex;【好用】
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
}
4、display: flex;【好用】
/* 父元素 */ .fatherDiv { width: 500px; height: 500px; background-color: green; display: flex; } /* 子元素 */ .sonDiv { width: 200px; height: 200px; background-color: pink; display: inline-block;margin: auto; }
5、position: absolute;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
6、position: absolute;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
7、position: absolute;【好用】
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
8、display: grid;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
margin: auto;
}
9、display: grid;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
}
块元素：
1、display: table-cell;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: table-cell;
vertical-align: middle;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
margin: auto;
}
2、display: flex;【好用】
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
}
3、display: flex;【好用】
/* 父元素 */ .fatherDiv { width: 500px; height: 500px; background-color: green; display: flex; } /* 子元素 */ .sonDiv { width: 200px; height: 200px; background-color: pink; display: block;margin: auto; }
4、position: absolute;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
5、position: absolute;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
6、position: absolute;【好用】
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
7、display: grid;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
margin: auto;
}
8、display: grid;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
}
- END -