Home > Article > Web Front-end > Problem with horizontal and vertical centering of html

Problem with horizontal and vertical centering of html

高洛峰Original: 2017-02-24 10:41:261387browse

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

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)

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

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

1.3padding (inner padding, needless to say)

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

2. Centered element

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

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

<!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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML常用标签及html标签的特点Next article：HTML设计模式笔记整理

See more

Problem with horizontal and vertical centering of html

Related articles