让一个元素垂直居中是我们开发经常遇到的问题,下述整理各种情况:
div垂直居中
场景设定:让一个50px*50px的Div在一个200px*200px的Div中垂直居中。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
绝对定位方式
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
设置外边距
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
未知容器的宽高,利用transform属性
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
属性 | 说明 |
---|---|
transform | 指定应用的变换功能 |
transform-origin | 指定变换的起点(默认元素的中心点) |
transform属性值
值 | 说明 |
---|---|
translate(<长度值,百分数值>)、translateX、translateY | 在水平方向、垂直方向或者两个方向上平移元素 |
scale(<数值>)、scaleX、scaleY | 在水平方向、垂直方向或者两个方向上缩放元素 |
skew(<角度>)、skewX、skewY | 在水平方向、垂直方向或者两个方向上使元素倾斜一定的角度 |
rotate | 旋转角度 |
matrix(4~6个数值,逗号隔开) | 指定自定义变换。 |
transform-origin属性的值
值 | 说明 |
---|---|
<%> | 指定元素x轴或者y轴的起点 |
<长度值> | 指定距离 |
left、center、right | 指定x轴上的位置 |
top、center、bottom | 指定y轴上的位置 |
通过设置容器的flexbox居中方式
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
文字垂直居中
场景设定:让一个50px*50px的Div在一个200px*200px的Div中垂直居中。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
line-height
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
dispaly:table
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
上述两者,效果会有所差异