# 如何竖直居中一个元素
参考代码: CSS/居中元素/垂直居中
# 被居中元素宽高固定
- 绝对定位,top和left 为 50%, margin的left和top为自身宽高一半
.center {
position: absolute;
top: 50%;
left: 50%;
margin-left: -9rem;
margin-top: -5rem;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
- 绝对定位,top和lefe为父元素一半剪自身一半
.center {
position: absolute;
top: calc(50% - 5em);
left: calc(50% - 9em);
}
1
2
3
4
5
2
3
4
5
# 被居中元素宽高不定
- 使用CSS3 的
transform
将位置在中心点平移自身宽高一半
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
1
2
3
4
5
6
2
3
4
5
6
- 使用flex布局居中
.wrapper {
display: flex;
}
.center {
margin: auto;
}
1
2
3
4
5
6
2
3
4
5
6
- flex布局,父元素指定子元素居中。
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
1
2
3
4
5
2
3
4
5
# 在浏览器窗口中居中
基于视口的垂直居中。不要求原生有固定的宽高,但是这种居中是在整个页面窗口内居中,不是基于父元素
.center{
margin: 50vh auto;
transform: translateY(-50%);
}
1
2
3
4
2
3
4