CSS 元素垂直居中的几种常用方法
XPoet 前端鼓励师

子绝父相

子绝父相:子元素绝对定位,父元素相对定位。

不知道子元素高度和父元素高度的情况

.parentElement {
position: relative;
}

.childElement {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

知道子元素高度和父元素高度的情况

.parentElement {
position: relative;
}

.childElement {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

子元素相对定位

父元素设置了高度,而且父元素里面只有一个子元素,可使用子元素相对定位。

.parentElement {
height: xxpx;
}

.childElement {
position: relative;
top: 50%;
transform: translateY(-50%);
}

CSS3 flex

如果不考虑低版本浏览器兼容性,用CSS3的flex布局就非常简单咯。

.parentElement {
display: flex;
align-items: center;
}
  • Post title:CSS 元素垂直居中的几种常用方法
  • Post author:XPoet
  • Create time:2018-02-02 16:54:40
  • Post link:https://xpoet.cn/2018/02/CSS元素垂直居中的几种常用方法/
  • Copyright Notice:All articles in this blog are licensed under BY-NC-SA unless stating additionally.
 Comments