Today, let's share the tips of "front-end HTML" - html is centered horizontally and vertically "This article is introduced in detail according to the example code. It may have a certain reference space and use value for everyone's programming. Friends in need will learn from Yunnan Qianlong Mark. Recently, I have encountered many problems in the middle, so I spent some time to summarize it and put it here. It will also be convenient to find it in the future
1. Centered text
The copy code is as follows:
<div class="wrap">
I'm in the middle
</div>
.. height+line-height+text-center(Center only (single line)
.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.2ddisplay: table cell (multi row fixed height centered)
The copy code is as follows:
.wrap{
width:px;
height:px;
border:px solid red;
text-align: center;
display:table-cell;
vertical-align: middle;
}
display:table cell: ie67 doesn't work. It's better to cooperate with display:table; Use together
ie67: (not in the future, but put it here)
Method 1: (the height of the em tag is the same as that of the parent, so the centering of span and em is equivalent to the centering of span at the parent)
The copy code is as follows:
<div class="wrap"> <span>
I'm in the middle... I'm in the middle... I'm in the middle... I'm in the middle
</span>
<em></em>
</div>
.wrap{
width:px;
height:px;
border:px solid red;
text-align: center;
}
.wrap span{
vertical-align: middle;
display:inline-block;
width:http://www.qlyl1688.com:px;
}
.wrap em{
height:%;
vertical-align: middle;
display:inline-block;
}
Method 2: (add a parent label with absolute positioning to the child element, and then match the relative positioning of the child element to be horizontally and vertically centered)
The copy code is as follows:
<div class="wrap">
<span class="span">
<span class="span">I'm in the middle... I'm in the middle... I'm in the middle... I'm in the middle</span>
</span>
</div>
.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(Internal filling (needless to say)
The copy code is as follows:
.wrap{
width:px;
border:px solid red;
padding:px ;
}
2. Centered element
The copy code is as follows:
<div class="wrap"> <span></span> </div>
2.1 position: absolute + margin negative value (margin can be calculated only if it has width and height)
The copy code is as follows:
.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 enables DIV to be horizontally centered and vertically centered up and down
The copy code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vertical center online presentation DIVCSS5</title>
<style>
#main {
position: absolute;
width:400px;
height:200px;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-100px;
border:1px solid #00F
}
/*css Note: to facilitate the screenshot, wrap the CSS code*/
</style>
</head>
<body>
<div id="main">DIV Horizontal center and vertical center<a href="http://www.divcss5.com/">DIVCSS5</a></div>
</body>
</html>
Introduce the principle of horizontal and vertical centering
Here, use absolute positioning position:absolute. Use left and top to set the distance and left of the object to 50%. However, if 50% is set, in fact, the box does not achieve the intermediate effect, so set margin left: - 200px; margin-top:-100px; Here's a trick. The margin left value is half the width, and the margin top value is also half the height of the object. At the same time, it is set to negative to achieve horizontal and vertical centering. The above is all the content introduced by Yunnan Qianlong Mark. I hope it will help you. If you have any questions, please leave a message at the script home. If you think this article is helpful to you, welcome to reprint it. Please indicate the source, thank you!