在 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

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

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

接下来的是重点：

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

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

方法三：position定位+margin

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

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

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

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

方法四：position定位+transform:translate()      （推荐）

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

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

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

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

方法五：定位top、left、right、bottom:0+margin: auto

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

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

方法六：flex布局+justify-content、align-items/align-content

将父容器设置为 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                （推荐）

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

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

最后

以上就是从容小懒虫为你收集整理的面试常问：7种CSS实现元素水平垂直居中的方法方法一：text-align + vertical-align方法二：text-align + line-height方法三：position定位+margin方法四：position定位+transform:translate()      （推荐）方法五：定位top、left、right、bottom:0+margin: auto方法六：flex布局+justify-content、align-items/align-content方法七：fle的全部内容，希望文章能够帮你解决面试常问：7种CSS实现元素水平垂直居中的方法方法一：text-align + vertical-align方法二：text-align + line-height方法三：position定位+margin方法四：position定位+transform:translate()      （推荐）方法五：定位top、left、right、bottom:0+margin: auto方法六：flex布局+justify-content、align-items/align-content方法七：fle所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。