Summary of issues related to horizontal and vertical centering of html_HTML/Xhtml

Summary of issues related to horizontal and vertical centering of html_HTML/Xhtml_Web page production

WBOY

Release： 2016-05-16 16:36:19

Original

1600 people have browsed it

I have 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

Copy code

Code As follows:

I am in the middle...

.. height line-height text-center（ Can only center a 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 elements below the element
1.2display:table-cell (Multiple lines with fixed height centered)

Copy code

The 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: It doesn’t work in ie67, it’s best to use it together with display:table;
ie67: (It won’t be used in the future. , but let’s put it here)
Method 1: (The height of the em tag is equal to the height of the parent, so centering span and em is equivalent to centering span on the parent)

Copy code

The code is as follows:

I am in the middle... I am in the middle... I am in the middle... I am in the middle...

.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 2: (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)

Copy code

The code is as follows:

I am in the middle... I am in the middle... I am in the middle... I am in the middle...

.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)

Copy code

The code is as follows :

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

2. Centered element

Copy code

The code is as follows :

2.1position:absolute negative margin (width and height must be available to calculate margin)

Copy code

The 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 implements horizontal centering and vertical centering of DIVs

Copy code

code As follows:

Up and down vertical centering online demonstration DIVCSS5

DIV is centered horizontally and vertically up and downDIVCSS5

< ;/html>

Introduction to the principle of horizontal and vertical centering
Absolute positioning position:absolute is used here. Use left and top to set the object distance to the top and left to 50%, but if it is set to 50%, the box is actually The centering effect is not achieved, so margin-left:-200px;margin-top:-100px; is set. The 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. At the same time, set is negative, thus achieving horizontal and vertical centering.