CSS垂直居中方法

前端攻城狮379

已于 2022-07-11 11:48:26 修改

阅读量481

点赞数

文章标签：前端 css3

于 2022-07-11 11:26:20 首次发布

本文链接：https://blog.csdn.net/weixin_44744746/article/details/125715919

版权

本文介绍了三种常见的垂直居中方法：通过设定行高使其适用于单行行内元素，利用绝对定位配合margin: auto实现精确居中，以及使用Flexbox的align-items和justify-content属性。详细讲解了每种方法的适用场景和代码示例。

摘要由CSDN通过智能技术生成

垂直居中的方法

设定行高（line-height）
绝对定位
使用Flexbox

设定行高（line-height）

适用于“单行”的“行内元素”（inline、inline-block），单行的标题，或是已经设为inline-block属性的div，若将line-height设成和高度一样的数值，则内容的行内元素就会被垂直居中，因为是行高，所以会在行内元素的上下都加上行高的1/2，所以就垂直居中了！不过由此就可以看出，为什么必须要单行的行内元素，因为如果多行，第二行与第一行的间距会变超大，就不是我们所期望的效果了。CSS示例：

    .box{
  width:200px;
  height:150px;
  border:1px solid #000;
  text-align: center;
  line-height: 150px;
}
.redbox{
  width:30px;
  height:30px;
  background:#c00;
  display: inline-block;
}

绝对定位

将子元素上下左右设置为0，搭配margin：auto，可以实现垂直居中，其中父元素必须设置为position：relative。

.box{
    position: relative;
    width:300px;
    height:150px;
    border:1px solid #000;
}
.redbox{
    position: absolute;
    width:100px;
    height:50px;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    background:red;
}

Flexbox

使用align-items或align-content属性，可以实现垂直居中效果

 .box{
    display:flex;
    align-items:center;
    justify-content:center;
    width:300px;
    height:150px;
    border:1px solid #000;
}
.redbox{
    width:100px;
    height:50px;
    background:aqua;
}