面试常问：7种CSS实现元素水平垂直居中的方法

Iman-Xu

已于 2022-08-06 10:16:48 修改

阅读量1k

点赞数 1

分类专栏：前端初学文章标签： css 前端 html

于 2022-08-05 14:51:53 首次发布

本文链接：https://blog.csdn.net/m0_61215908/article/details/126175499

版权

13 篇文章 0 订阅

订阅专栏

在 CSS 中对元素进行水平居中是非常简单的：

如果它是一个行内元素，就对它的父容器应用 text-align: center；如果它是一个块级元素，就对它自身应用 margin: auto。

方法一：text-align + vertical-align

text-align实现行内元素的水平居中显示，写在父容器中。

verti-align针对于行内元素、行内块元素以及表单元素可实现垂直居中显示，直接写在行内元素、行内块元素以及表单元素的样式中。

.box{
/*写在父盒子中*/
    text-align:center;
}
.botton{
/*写在行内元素/表单元素中*/
    vertical-align:center;
}

text-align实现行内元素的水平居中显示，line-height等于盒子的高度即可实现垂直居中，都写在父容器中。

.box{
    height：100px;
    text-align：center；
    line-height:100px；
}

接下来的是重点：

实现块级元素的水平垂直居中

这不仅在实际开发中经常遇到，还是面试的高频问题噢！

绝对定位absolute（推荐）和固定定位fixed（不推荐）都可以。

通过定位left:50%、top:50%先让子元素的左上角居中，然后再通过margin向上向左各移动高度宽度的一半（向上和向左都是负值），就达到了水平垂直居中的效果。

.box{
    position:absolute;
    width:100px
    height:100px;
    left:50%;
    top:50%;
    /*顺序：上 右 下 左*/
    margin:-50px auto auto -50px;
}

缺点：需要指定子盒子的宽高。

绝对定位absolute（推荐）和固定定位fixed（不推荐）都可以。

第一步跟方法三的相同，然后再通过transform:translate(-50%，-50%) ，以该元素自身的宽度和高度为基准进行换算（动态计算宽高）向上向左各移动高度宽度的一半，就达到了水平垂直居中的效果。

.box{
    position:absolute;
    width:100px
    height:100px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

这个方法在没有指定子元素宽高的情况下，也能让其在父容器中水平垂直居中！

.box{
    position:absolute;
    width:100px;
    height:100px;
    top:0;
    right:0;
    bottom:0;
    left:0; 
    margin: auto;
}

margin:auto，让这个指定的子元素在剩余空间里，水平垂直居中。

将父容器设置为 Flex 布局，再给父容器添加两个属性justify-content: center， align-items: center(单行)/align-conten:center，这样的话，子元素就能实现水平垂直居中了。

.fatherbox{
    display:flex;
    /*主轴*/
    justify-content:center;
    /*侧轴*/
    align-items:center;
}

当子元素指定了高度而父盒子没有时，align-items/align-content会失效，此时需要在父盒子内添加height:100vh（主轴方向为默认的row时）。

vh，是指CSS中相对长度单位，表示相对视口高度（Viewport Height），1vh = 1% * 视口高度

缺点：该父盒子内的所有子元素都水平垂直居中了，不方便指定。

将父容器设置为 Flex 布局，再给要指定的子元素添加margin：auto。

.fatherbox{
    display:flex;
}
.box{
    margin:auto;
    width:100px;
    height:100px;
}

关注