css中一个div在另一个div中垂直水平居中的方法

css中一个div在另一个div中垂直水平居中的若干种方法

css中将元素居中的方法大致有定位居中、弹性盒居中、行内块结合vertical-align以及text-align等方法。

定位居中

• 定位居中，顾名思义需要用到 “position” 属性，给父盒子加上相对定位，子盒子加上绝对定位，具体实现请看下面代码。

弹性盒居中

• 弹性盒是css3中引入的一个新属性值flex,它是一种新的布局模式flexbox布局，即伸缩布局盒模型。用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者动态的。

行内块inline-block结合vertical-align以及text-align

• 行内块元素的特殊性可以使元素设置大小，并且具有文本属性。vertical-align调节垂直方向上的对齐方式，text-align调节水平方向上的对齐方式。

具体代码如下：

	

		
1
	
	

		
2
	
	

		
3
	
	

		
4
	
	

		
5
	
	

		
6
	
	

		
7
	
	

		
8
	

其中最常用的居中方法有定位居中和设置弹性盒居中。大家在使用的时候还是看个人习惯或者公司要求。