css垂直居中n种方法 |bootcss logo

css字体编号，关于css的样式，css 超出父元素隐藏，js css3 画图，css 盒子模型都有哪些，描述css盒模型及其作用，bootcss logo css垂直居中n种方法 |bootcss logo

1. 使用 Flexbox

.parent{
display:flex;
align-items:center; // 垂直居中
}

2. 使用 Grid

.parent{
display:grid;
place-items:center; // 垂直居中
}

3. 使用 table-cell

.parent{
display:table-cell;
vertical-align:middle; // 垂直居中
}

4. 使用 Absolute 和 translation

.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
transform:translateY(-50%); // 垂直居中
}

5. 使用 line-height

.parent{
height:100px;
line-height:100px; // 垂直居中
}

6. 使用伪元素

.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
transform:translateY(-50%);
}
.child::before{
content:"";
display:inline-block;
height:100%;
vertical-align:middle;
}

这些方法都可以在不同场景下应用，开发者可以根据具体情况选择最适合的垂直居中方法。