水平垂直居中有哪些方式?

140 阅读1分钟

1. 定高度和行高

text-align:center;
line-height: all-height;

2. flex

display:flex;
justify-content:center;
align-items:center;

3. 定位实现

// 父元素
position:relative;

//需要居中的元素
positon:absolute;
top: 50%;
left: 50%
transform:translate(-50%, -50%)

4. 行内元素

// 父元素
text-align:center;

// 子元素  -》行内元素
vertical-align:middle;