css垂直居中怎么布局 |css3 logo 动画

1. 使用table-cell和vertical-align属性

.parent {
display: table-cell;
vertical-align: middle;
}

将父元素设为display:table-cell，子元素即可通过vertical-align:middle实现垂直居中。

2. 使用flex布局

.parent {
display: flex;
justify-content: center;
align-items: center;
}

将父元素设为display:flex，子元素即可通过justify-content:center和align-items:center实现水平居中和垂直居中。

3. 使用绝对定位

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

将父元素设为position:relative，然后将子元素设为position:absolute，再用top:50%和transform:translateY(-50%)实现垂直居中。

4. 使用CSS Grid布局

.parent {
display: grid;
justify-content: center;
align-items: center;
}

将父元素设为display:grid，子元素即可通过justify-content:center和align-items:center实现水平居中和垂直居中。

以上是一些常用且简单的实现垂直居中的方法，根据实际情况选择最适合的方法即可。