Problem with horizontal and vertical centering of html

I encountered a lot of centering problems recently, so I took some time to summarize them here so that they can be easily found in the future

1. Centered text

      我在中间……

.. height+line-height+text-center（只能居中单行）
.wrap{
    width:px; 
    height:px;
    border:px solid red; 
    text-align: center;
    line-height: px;
}

ps:text-align:center just centers the inline element below the element
1.2display:table-cell (Multi-line fixed height centered)

.wrap{
    width:px; 
    height:px;
    border:px solid red; 
    text-align: center; 
    display:table-cell; 
    vertical-align: middle;
}

display:table-cell：ie67不管用,最好配合display:table;一起用

ie67 next: (I won’t use it in the future, but I’ll put it here)
Method one: (The height of the em tag is the same as the height of the parent, so centering span and em is equivalent to centering span on the parent)

   
       我在中间…… 我在中间…… 我在中间…… 我在中间……
   
   

 .wrap{
     width:px; 
     height:px;
     border:px solid red; 
     text-align: center;
 }
 .wrap span{
     vertical-align: middle;
     display:inline-block; 
    width:px;
}
.wrap em{
    height:%;
    vertical-align: middle; 
    display:inline-block;
}

Method two: (By adding an absolutely positioned parent tag to the child element, and then matching the relative positioning of the child element to center it horizontally and vertically)

    
       我在中间…… 我在中间…… 我在中间…… 我在中间……
    

 .wrap{
     width:px; 
     height:px;
     border:px solid red;
     display:table;
     position:relative; 
     overflow: hidden;
 }
 .wrap .span{
    display:table-cell; 
    vertical-align: middle; 
    text-align: center;
    *position:absolute;
    top:%;
    left:%;
}
.wrap .span{
    *position:relative;
    top:-%;
    left:-%;
}

1.3padding (inner padding, needless to say)

.wrap{
    width:px;
    border:px solid red;
    padding:px ;
}

2. Centered element

2.1position:absolute+margin negative value (you must have width and height to calculate margin)

 .wrap{
     width:px; 
     height:px;
     position:absolute; 
     top:%; 
     left:%; 
     margin-top:-px; 
     margin-left:-px;
     border:px solid red;
}
.wrap span{ 
    width:px; 
    height:px; 
    background:red;
    position: absolute; 
    top:%; 
    left:%; 
    margin-top:-px; 
    margin-left:-px;
}

ps: CSS implements horizontal centering and vertical centering of p

  
  
  
  
  
  

  
  
   
p水平居中和上下垂直居中pCSS5
  
  

Introduction to the principle of horizontal and vertical centering
Absolute is used here Position position: absolute, use left and top to set the object distance to the top and left to 50%, but if you set it to 50%, the box will not actually be centered, so you set margin-left:-200px; margin-top:-100px ;, a trick here is that the value of margin-left is half the width, and the value of margin-top is also half the height of the object, and is set to negative at the same time, thus achieving horizontal and vertical centering.

For more articles related to the issue of horizontal and vertical centering of html, please pay attention to the PHP Chinese website!