让元素在div中垂直居中的三种方式

时间：2025-01-20 10:55:50

    对于文字的垂直居中相当简单，只需要设置外层div的height与line-height值相等即可，但是此样式却不适用于div，img，p等元素的居中，下面是解决办法：

一、已知父级div宽高

使父级div显示为表格单元格，通过设置vertical-align:middle;就可以使其中的块级元素垂直居中

// 父级样式
div {

height: ?px || ?% || ?vh;

width:?px || ?% || ?vw;

display:table-cell;      

vertical-align:middle; /*垂直居中*/

text-align:center; /*水平居中*/

}

二、父级div高度不确定

当父级div的高度不确定时，可以通过相对-绝对定位来使子元素垂直居中且水平居中

// 父级样式
.parent {
  width: 100%;
  position: relative;
}

// 子级样式
.son {
  max-width: 60%;
  left: 50%;
  top: 50%;
  position: absolute;
  -webkit-transform: translate(-50%, -50%); /* 水平居中，垂直居中*/
  transform: translate(-50%, -50%); /* 水平居中，垂直居中*/
}

三、父级div宽高确定时的另一种方式

flex布局是css3中出现比较好的一种方式。它的justify-content属性规定子元素在容器主轴上的对齐方式，align-items属性规定子元素在容器交叉轴上的对齐方式。需要了解的是在不设置父级的flex-direction样式时，主轴方向默认为水平方向。

// 父级样式
.parent {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center; /*垂直居中*/
  justify-content: center; /*水平居中*/
}

 

 

相关文章