前言
内容水平垂直居中是我们在页面布局中经常会遇到的问题,同时这也是css面试中最经典的问题,包括使用CSS属性position
、flex
、grid
、table
、margin
去实现。
1. 使用 position: absolute
+ translate
或 margin
负值(已知宽高)
这是一种最常见的水平垂直居中方法。通过将容器的position
属性设置为absolute
,再利用left
和top
属性与transform: translate(-50%, -50%)
或负值的margin
实现水平垂直居中。注意,第二种方法需要明确指定容器的宽度和高度,适用于已知宽高的元素。
html
<div class="container">
<div class="centered">Hello, World!</div>
</div>
css
<style>
/* 不知宽高 */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 已知宽高 */
.centered {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -75px; /* 移动左宽度和上高度的一半 */
width: 150px;
height: 100px;
background-color: yellow;
}
</style>
在将一个元素水平垂直居中时,我们通将它的left
和top
属性设置为50%,transform: translate(-50%, -50%)
是CSS3中的一个变换函数,用于移动元素的位置。其中-50%
表示元素自身宽度或高度的50%,即让元素向左和向上移动自身宽度和高度的一半,从而实现水平垂直居中的效果。该方法的好处在于不需要知道元素的宽度和高度,可以适用于不确定宽高的情况,也是最常用的方法。
不知宽高效果图:
已知宽高效果图:
2. 使用 flex
布局
使用CSS3中的flex
布局可以非常方便地实现水平垂直居中。使用display: flex
将父容器设置为弹性盒子容器,再使用justify-content: center;
和align-items: center;
让子元素分别在x轴和y轴居中,即实现水平垂直居中。
html
<div class="container">
<div class="centered">Hello, World!</div>
</div>
css
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 1px solid #ccc;
}
.centered {
width: 150px;
height: 100px;
background-color: yellow;
}
</style>
效果图:
3. 使用 grid
布局
使用CSS3中的grid
布局也可以非常方便地实现水平垂直居中。使用display: grid
将父容器设置为网格容器,再使用place-items: center;
让子元素水平垂直居中。注意,place-items: center;
只适用于网格布局容器。它是align-items
和justify-items
属性的简写形式,可以同时设置水平和垂直方向上的对齐方式为居中。
html
<div class="container">
<div class="centered">Hello, World!</div>
</div>
css
<style>
.container {
display: grid;
place-items: center;
/* justify-content: center; */
/* align-items: center; */
height: 200px;
border: 1px solid #ccc;
}
.centered {
width: 150px;
height: 100px;
}
</style>
效果图:
4. 使用 table
属性
使用table
属性也可以实现水平垂直居中。使用display: table
将父容器设置为表格容器,再将子元素设置为表单元格display: table-cell
。注意,在表格布局中,vertical-align: middle;
属性只对表格单元格元素(display: table-cell
)生效。它用于控制表格单元格内部内容的垂直对齐方式。而text-align: center;
属性则用于控制容器内部内容的水平对齐方式。
html
<div class="container">
<div>
Hello, World!
</div>
<div>
Hello, World!
</div>
</div>
css
<style>
.container {
display: table;
/* 将父容器为表格 */
width: 100%;
height: 300px;
border: 1px solid #ccc;
}
.container div {
display: table-cell;
/* 将子容器设置为表格单元格 */
vertical-align: middle;
/* 垂直居中 */
text-align: center;
/* 水平居中 */
}
</style>
效果图:
5. 使用 margin
(已知宽高)
使用CSS的margin
属性也可以实现水平垂直居中。通过计算父容器与子容器的宽高得出可将子元素水平垂直居中的margin
的值,水平和垂直方向同时为宽度和高度的一半,就可以让子元素水平垂直居中。
html
<div class="container">
<div class="centered">Hello, World!</div>
</div>
css
<style>
.container {
width: 300px;
height: 200px;
border: 1px solid #ccc;
}
.centered {
width: 150px;
height: 100px;
background-color: yellow;
margin-left: 75px;
/* 左右宽度:(300 - 150 )/ 2 = 75 */
margin-top: 50px;
/* 上下宽度:(200 - 100 )/ 2 = 50 */
}
</style>
效果图:
总结
对于position: absolute
+ translate
和 flex
这俩种水平垂直居中的方法,相信大家是非常的熟悉,也是大家最常用的方法,而使用 margin
(已知宽高)这种方法也是最基础但却最捞的方法。grid
栅格布局也是可以实现的方法之一,但是对于使用 table
属性这点是非常少见的,也是面试中最难回答到的一点,少而显优,这便是加分项的答案。最后,即将面临春招,祝愿大家都能够旗开得胜,马到成功!
最后,如果这篇文章对您有所帮助,还希望大家多多点赞支持,如有错误也欢迎大家指正。