共计 3028 个字符,预计需要花费 8 分钟才能阅读完成。
老生常谈,水平垂直居中。为什么大家都爱水平垂直居中呢?
基本 HTML
<div class="father">
<div class="child">
</div>
</div>
根据如上结构,通过 css 实现水平垂直居中。
绝对定位
利用父元素相对定位和子元素绝对定位进行水平垂直居中。根据是否知道子元素宽高,使用数值或者百分比的方式进行定位。
方法 1
.father {
width: 100px;
height: 100px;
background-color: grey;
position: relative;
}
.child {
width: 50px;
height: 20px;
background-color: red;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
通过设置四向为 0 和 margin: auto
实现。
方法 2
.father {
width: 100px;
height: 100px;
background-color: grey;
position: relative;
}
.child {
width: 50px;
height: 20px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
margin: -10px -25px;
}
通过设置 left
和top
使 child 左上角位置移动到中间,然后再移动自身宽高一般使 child 中心至中间。
方法 3
.father {
width: 100px;
height: 100px;
background-color: grey;
position: relative;
}
.child {
width: 50px;
height: 20px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
方法 4
.father {
width: 100px;
height: 100px;
background-color: grey;
position: relative;
}
.child {
width: 50px;
height: 20px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-25px, -10px);
}
总结
这几种方法使用了绝对定位,margin 或者 transform 来使子元素水平垂直居中,根据是否知道具体宽高来使用 margin 或者 transform。
弹性盒子
方法 5
.father {
width: 100px;
height: 100px;
background-color: grey;
display: flex;
}
.child {
width: 50px;
height: 20px;
background-color: red;
margin: auto;
}
方法 6
.father {
width: 100px;
height: 100px;
background-color: grey;
display: flex;
justify-content: center;
align-items:center;
}
.child {
width: 50px;
height: 20px;
background-color: red;
}
总结
这两种使用了 flex 弹性盒子布局来实现,随着浏览器兼容性的普及,弹性盒子也越来流行了。
table-cell
方法 7
.father {
width: 100px;
height: 100px;
background-color: grey;
display: table-cell;
text-align:center;
vertical-align: middle;
}
.child {
display:inline-block;
width:50px;
height:20px;
background-color: red;
}
使用了 table-cell 以及行内块元素来实现
行内元素
方法 8
.father {
width: 100px;
height: 100px;
background-color: grey;
text-align:center;
}
.child {
display:inline-block;
width:50px;
height:20px;
background-color: red;
vertical-align: middle;
}
.father:after{
content:'';
width:0;
height: 100%;
display: inline-block;
vertical-align: middle;
}
利用伪元素撑开高度垂直居中。
方法 9
.father {
width: 100px;
line-height: 100px;
background-color: grey;
text-align: center;
}
.child {
display: inline-block;
width: 50px;
height: 20px;
background-color: red;
vertical-align: middle;
}
利用父元素 line-height
与 inline-block 子元素 vertical-align
垂直居中
相对定位
方法 10
是不是有点疑惑为啥 1、2、3 都要用 absolute
来定位,用 relative
不行吗?
答案是可以的。????
.father {
width: 100px;
height: 100px;
background-color: grey;
}
.child {
width: 50px;
height: 20px;
background-color: red;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
方法 11
.father {
width: 100px;
height: 100px;
background-color: grey;
}
.child {
width: 50px;
height: 20px;
background-color: red;
position: relative;
left: 50%;
top: 50%;
transform: translate(-25px, -10px);
}
总结
其实要想水还很再水出方法 12、方法 13 等等,但是主要问题并不在这里,我觉得大家都喜欢问垂直居中问题的主要目的,还是想考验大家对基础 css 的了解,定位、布局、元素等,比如说相对布局和绝对布局,比如说块级元素和行内元素,比如说 margin 和 padding,比如说百分比的参照者,比如说伪元素的运用,比如说 transform 用法等等。
最主要考察的是对这些基础实际运用能力和理解能力,并不是说面试官真的想知道你了解多少种垂直居中的方法,他只是想了解一下面试者 css 的基础罢了。
随手一个方法 12
.father {
width: 100px;
height: 100px;
background-color: grey;
}
.child {
width: 50px;
height: 20px;
background-color: red;
margin: auto;
}
.father:before {
content: "";
width: 0;
height: calc(50% - 10px);
display: block;
vertical-align: middle;
}