Problem with horizontal and vertical centering of html-HTML Tutorial-php.cn

Problem with horizontal and vertical centering of html

高洛峰

Release： 2017-02-24 10:41:26

Original

1387 people have browsed it

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

<p class="wrap">
      我在中间……
</p>
.. height+line-height+text-center（只能居中单行）
.wrap{
    width:px; 
    height:px;
    border:px solid red; 
    text-align: center;
    line-height: px;
}

Copy after login

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;一起用

Copy after login

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)

<p class="wrap">
   <span>
       我在中间…… 我在中间…… 我在中间…… 我在中间……
   </span>
   <em></em>
</p>
 .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;
}

Copy after login

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)

<p class="wrap">
    <span class="span">
       <span class="span">我在中间…… 我在中间…… 我在中间…… 我在中间……</span>
    </span>
</p>
 .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:-%;
}

Copy after login

1.3padding (inner padding, needless to say)

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

Copy after login

2. Centered element

<p class="wrap">
    <span></span>
</p>

Copy after login

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;
}

Copy after login

ps: CSS implements horizontal centering and vertical centering of p

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8" />  
<title>上下垂直居中 在线演示 pCSS5</title>  
<style>  
#main {  
   position: absolute;  
   width:400px;  
   height:200px;  
   left:50%;  
   top:50%;  
   margin-left:-200px;  
   margin-top:-100px;  
   border:1px solid #00F  
}  
/*css注释：为了方便截图，对CSS代码进行换行*/  
</style>  
</head>  
<body>  
   <p id="main">p水平居中和上下垂直居中<a href="http://www.pcss5.com/">pCSS5</a></p>  
</body>  
</html>

Copy after login

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!