HTML居中对齐与垂直居中

一、设置子div水平对齐

1. 首先要有个父容器设置为text-align:center; 其次它的子div的margin的左右边距一定要设置为auto，上下边距不做要求
2. 要指定子div的宽度与高度。

 

二、设置元素垂直居中

1.本人比较推荐使用弹性盒子，主要是现在一般浏览器都支持，可以自动调节

将父容器加上display:flex;   flex-direction:column;   justify-content:space-around;    items-align:center;这4段css代码意思是子元素垂直排列根据子元素的个数将 子元素  从上到下排满父容器 间距 自动调节；

	
	
自动划分1
	

		
自动划分1
		
自动划分2
		
自动划分3
	

如果将flex-direction:column;改成flex-direction:row;则水平排列

 

2.设置display为table-cell布局  对齐垂直居中vertical-align:middle;

3.设置子元素行高等于父元素高度

	
弹性盒子
	
	
	
test20 test21test22 test23 
	
css设置为table布局
	
height:150px;line-height: 150px

效果如下：