css属性上下居中显示 |css小图标

.center {
display: flex; /*使用flex布局*/
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}

大家可以使用flex布局来实现上下居中，只需要在容器上使用display: flex;属性，然后设置justify-content为center实现水平居中，设置align-items为center实现垂直居中。

.center {
position: absolute; /*使用绝对定位*/
top: 50%; /*上边距为50%*/
left: 50%; /*左边距为50%*/
transform: translate(-50%, -50%); /*再偏移自身宽高的一半*/
}

另外一种实现上下居中的方式是使用绝对定位配合transform属性。大家可以设置元素的上边距和左边距都为50%，然后使用transform: translate(-50%, -50%)将元素向左和向上偏移自身宽高的一半。

总之，使用CSS属性上下居中可以让大家的网页内容更加美观、易读，提高用户体验。以上是两种实现方式，希望对您有所帮助。