文章目录
CSS元素居中
水平居中
flex布局
.parent {
display: flex;
justify-content: center;
}
text-align
对inline inline-block inline-table inline-flex都有效,用在父元素
.parent {
text-align: center;
}
对块元素,可以转为行内块,然后父元素text-align
将内部转为行内块然后外部text-align,这种方法也适用于内部多个块的情况
.child {
display: inline-block;
}
.parent {
text-align: center;
}
margin
定宽:左右margin
.child {
width: 100px; /* 确保内部块是定宽 */
margin: 0 auto;
}
内容宽:table+margin
子元素设置为块级表格,再将其水平居中
display: table在表现上类似block,但宽度为内容宽
.child {
display: table; /* 宽度为内容宽,根据内容自动调整宽高 */
margin: 0 auto;