CSS 居中对齐（水平、垂直）

弹性盒模型水平垂直居中三剑客

.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

1、text-align:center —— 水平居中

仅对文字、图片、按钮等行内元素有效（display设置为inline或inline-block等）进行水平居中

2、margin：0 auto； —— 水平居中

仅水平居中，且对浮动元素定位无效

3、line-height —— 垂直居中

line-height=height ，仅对一行文字有效

4、使用表格 —— 水平、垂直居中

对td/th的align=‘center’和valign=‘middle’两属性可以水平和垂直居中

5、弹性布局 —— 水平、垂直居中

还有就是子绝父相

.father{

position:relative;

}

.son{//m、n为子盒子宽、高的一半

position:absolute;

left:50%;

top:50%;

margin-left:-mpx;

margin-top:-npx

了解这些差不多了 关于居中