元素垂直居中的几种方法

Posted 2020-10-18 第指南

<div class="parent">
　　<span>asdlfkjadsl;fjadls;</span>
</div>

方法一

设置父级元素显示方式为表格 ( display: table; ) 这样就可以使用表格的 vertical-align: middle;属性

设置子元素

display: table-cell;

vertical-align: middle;

eg:

.parent {
　　width: 100%;
　　height: 100px;
　　display: table;
}

.child {
　　text-align: center;
　　display: table-cell;
　　vertical-align: middle;
}

优点: 父元素和子元素的高度多高都行

缺点: IE8 不好用

方法二

使用定位,

设置父元素position: relative,

子元素

position: absolute;

top: 50%;

height: 50px;

margin-top: -25px;  margin-top: -高度的一半

.parent {
　　background-color: red;
　　width: 100%;
　　height: 100px;
　　position: relative;
}

.child {
　　display: inline-block;
　　text-align: center;
　　height: 50px;
　　position: absolute;
　　top: 50%;
　　margin-top: -25px;

}

缺点: 子元素的高度是固定的

 

方法三

line-height的方式

设置子元素的line-height等于父元素的高度

.parent {

　　height: 100px;

}

.child {

　　line-height: 100px;

} 

这种方式只能设置单行文本垂直居中

 

方法四

使用vertical-align 加伪元素的方式居中

vertical-align 指的是当前 inline 元素自己，与其它 inline 元素如何对齐

所以给父元素添加一个伪元素, 在对子元素设置vertical-align: middle;就可以实现垂直居中

.parent {
　　background-color: var(--fontColor);
　　width: 100%;
　　height: 100px;
}
.parent::before {
　　content: \'\';
　　display: inline-block;
　　height: 100%;
　　vertical-align: middle;
}

.child {
　　display: inline-block;
　　text-align: center;
　　vertical-align: middle;
}

缺点: 如果需要用伪元素做一些事情的话, 这种方式就不太完美了

 

方法五

transform

类似用定位的方式, 通过transform向上移动高度的一半

.parent {
　　background-color: var(--fontColor);
　　width: 100%;
　　height: 100px;
}

.child {
　　display: inline-block;
　　text-align: center;
　　position: relative;
　　top: 50%;
　　transform: translateY(-50%);
}

 

方法六

flexbox, 几乎一切跟布局相关的问题,都能用flexbox解决, 前提是浏览器要支持

justify-content: center;　　设置元素在主轴上的对齐方式

align-items: center;　　　　设置元素在交叉轴上的对齐方式

.parent {
　　background-color: red;
　　width: 100%;
　　width: 400px;
　　height: 200px;
　　display: flex;
　　flex-flow: row wrap;
　　justify-content: center;
　　align-items: center;
}

.child {
　　display: inline-block;
　　width: 50px;
　　height: 50px;
　　margin: 8px;
　　background-color: green;
　　text-align: center;
　　line-height: 50px;
}