HTML中CSS文本、子元素、图片水平居中和垂直居中的几种方法

CSS文本居中

1.单行文本居中

水平居中：text-align:center;
垂直居中：line-height:XXpx;/*line-height与该元素的height的值一致*/

    
	
	
	
    
    
	

	    hello world!
	
    

 

2.多行文本居中

父级元素高度不固定时：

可以通过设置padding来让文本看起来垂直居中。

    
	
	
	
    
    
	

	    

		this is a small div.this is a small div.
		this is a small div.this is a small div.
	    
        
    

 

垂直居中与水平居中

1.水平居中显示：margin:0 auto

    
	
	
	
    
    
	

	    
	
		hello world!
	    
	
    

 

注意：要给居中的元素一个宽度，且该元素一定不能浮动，否者无效。

2.水平居中和垂直居中显示：绝对定位 position:absolute

方式1：
position：absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;

    
        
	
	
    
    
	

	    
	
		hello world!
	    
	
    

方式2：
position：absolute;
top: 50%;
left:50%;
margin-top:-(height/2)px;   //值为高度的一半；
margin-left:-(width/2)px;   //值为宽度的一半；

    
	
	
	
    
    
	

	    
	
		hello world!
	    
	
    

方式3：
position：absolute;
top: 50%;
left:50%;
transform:translate(-50%,-50%):

    
	
	
	
    
    
	

	    
	
		hello world!
	    
	
    

注意：对于absolute定位的层总是相对于其最近的定义为absolute或relative或fixed的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative或fixed，则其将相对body进行定位。

3.水平居中和垂直居中显示：表格布局 display:table-cell

通过在其父级元素中添加样式：display: table-cell，可以把元素当作表格单元来显示，再添加vertical-align: middle，就使其子元素垂直居中,通过给子元素设置margin:0 auto 实现水平居中。

4.水平居中和垂直居中显示：弹性布局display:flex

通过在其父级元素中添加样式：
display: flex;
justify-content:center;  //使子元素水平居中
align-items:center;   //使子元素垂直居中

    
        
        
        
    
    
	

	    
子元素
	
    

5.水平居中和垂直居中显示：display:box

通过在其父级元素中添加样式：
display: box;
display: -webkit-box;
-webkit-box-pack:center; /*实现水平居中*/
-webkit-box-align:center; /*实现垂直居中*/

    
        
        
        
    
    
	

	    
子元素
	
    

图片居中

水平居中：
       在其父级元素添加样式text-align:center
垂直居中：
       1.在其父级元素添加padding样式
       2. 在图片标签前面添加一个行内元素，如
       给标签样式：height:100%;display:inline-block; vertical-align: middle;
       给图片标签添加样式：vertical-align: middle;
       由于图片大小不能大于div层大小，因此最好给图片标签设置max-width,max-height样式。