CSS元素居中

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;