CSS中所有东西居中,都是通过使用
text-align: center; 属性来实现的。在HTML中,如果想让一个元素水平居中,可以使用以下样式:
element {
margin: 0 auto;
} 其中,
margin: 0 auto; 指的是上下外边距为0,左右外边距为自动,从而实现水平居中。如果想让一个元素垂直居中,则可以使用以下样式:
parent {
display: flex;
justify-content: center;
align-items: center;
} 其中,
display: flex; 表示父元素使用弹性布局,justify-content: center; 和 align-items: center; 则表示子元素在水平和垂直方向上都居中。如果同时想让元素在水平和垂直方向上都居中,则可以使用以下样式:
parent {
position: relative;
}
child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} 其中,
position: relative; 表示父元素相对定位,position: absolute; 表示子元素绝对定位。然后,top: 50%; 和 left: 50%; 表示子元素的上下和左右各偏移50%的距离,transform: translate(-50%, -50%); 则表示再向左和向上偏移50%的距离,从而实现水平和垂直居中。总之,CSS中所有东西居中的方法都非常简单,只需掌握好几个属性即可轻松实现。