水平居中
行内元素的居中
父元素text-align: center;
块级元素居中
指定宽度后,设置margin: auto。
width: 100px; margin: 0 auto;
垂直居中
行内元素居中
设置line-height
与height
相等。
块级元素居中
- flex
- 已知高度
- 用CSS3的新属性
calc
,计算top,top: calc(50% - 50px);
- 用
top
+margin-top
实现
- 用CSS3的新属性
position: relative;
height: 100px;
margin-top: 50%;
top: -50px;
- 未知高度:用
margin-top: 50%;
+translate: -50%
实现