当面试官问你使内容水平垂直居中的方式有哪些时,你可以回答出几种?如何说出加分项的答案?

前言

内容水平垂直居中是我们在页面布局中经常会遇到的问题,同时这也是css面试中最经典的问题,包括使用CSS属性positionflexgridtablemargin 去实现。

1. 使用 position: absolute + translatemargin 负值(已知宽高)

这是一种最常见的水平垂直居中方法。通过将容器的position属性设置为absolute,再利用lefttop属性与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>

在将一个元素水平垂直居中时,我们通将它的lefttop属性设置为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-itemsjustify-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 + translateflex 这俩种水平垂直居中的方法,相信大家是非常的熟悉,也是大家最常用的方法,而使用 margin (已知宽高)这种方法也是最基础但却最捞的方法。grid 栅格布局也是可以实现的方法之一,但是对于使用 table 属性这点是非常少见的,也是面试中最难回答到的一点,少而显优,这便是加分项的答案。最后,即将面临春招,祝愿大家都能够旗开得胜,马到成功!

最后,如果这篇文章对您有所帮助,还希望大家多多点赞支持,如有错误也欢迎大家指正。

相关推荐
Cwhat1 分钟前
前端性能优化2
前端
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死3 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人3 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人3 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香3 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596933 小时前
前端预览word、excel、ppt
前端·word·excel