css居中对齐笔试 |粉色 css

/* 水平居中对齐 */
.center-horizontal {
width: 100px; /* 可根据实际情况设置宽度 */
margin: 0 auto; /* 设置左右外边距为auto */
}

通过设置左右外边距为auto，就可以实现水平居中对齐。宽度需要根据实际情况进行设定，一般情况下为固定宽度。

/* 垂直居中对齐 */
.center-vertical {
height: 100px; /* 可根据实际情况设置高度 */
line-height: 100px; /* 行高等于高度 */
text-align: center; /* 文字水平对齐方式为中间 */
}

通过设置行高与高度相等，就可以实现垂直居中对齐。同时需要将文字水平对齐方式设置为中间，才能达到完全居中的效果。

/* 水平垂直居中对齐 */
.center {
position: absolute; /* 绝对定位 */
top: 50%; /* 距离顶部50% */
left: 50%; /* 距离左侧50% */
transform: translate(-50%,-50%); /* 将元素的中心点移动到容器的中心点 */
}

通过绝对定位和transform的方式可以实现水平垂直居中对齐。需要设置元素距离顶部和左侧的距离都为50%，然后通过transform：translate(-50%,-50%)将元素的中心点移动到容器的中心点。