css实现文字或者div盒子水平垂直居中的方法

实现水平垂直居中的方法

文本（文字）内容属于行内元素

行内元素水平垂直居中方法

方式一：

设置文字外层的盒子

text-align:center /*水平居中*/  
height = 100px;  /*垂直居中  */
line-height = 100px;    

垂直居中只要保证行高和盒子高度一致即可
代码如下：

	
	



	hello

方式二：转换成单元格

将文字所在的盒子display设置成table-cell

text-align:center 水平居中  
display:table-cell; 垂直居中  
vertical-align:middle;    

注意：只有单元格元素才拥有vertical-align属性
代码如下：

	
	



	hello


	
123

块级元素水平居中方法

margin:0 auto;
只能设置水平居中，而margin:auto 0 不能设置垂直居中，因为margin垂直塌陷问题

方法一：定位+margin

父级元素设置position:relative;
儿子元素设置

width: 100px;  
height: 100px;  
position:absolute;  
top:50%;  
left:50%;  
margin-top:-50px;  
margin-right:-50px;  

只要margin-left为高度的一半，margin-right为宽度的一半即可
代码如下：

	
	



	
你好

方式二：定位方法

父级元素设置position:relative;
儿子元素设置

position:absolute;  
top:0;  
bottom:0;  
left:0;  
right:0;  
margin:auto;  

这样设置以后，浏览器将自动将上下外边距相同，左右外边距相同，达到垂直居中的效果
代码如下：

方式三：单元格方法

利用单元格法
父级元素

display:table-cell;  
text-align:center;  
vertical-align:middle;   

子元素
display:inline-table
因为text-align只对行内元素和行内块生效
代码如下：

	
	



		

			小盒子
		
	

	
	

		

        123