4 ways to align elements horizontally vertically in CSS

Table-cell easy to set text picture horizontally vertically centered

The idea of getting an element to be centered vertically is to set the container of this element to Table-cell, that is, the feature with the table cell, and then use the Vertical-align (this property does not work on the block element. But the Table-cell element is valid, the setting element is centered vertically to achieve the desired effect.
IE7 and the following version do not support this method, IE8 and the above version and most of the mainstream browsers are well supported.
HTML code

The code is as follows	Copy Code
<div class= "img" > </div> Style rules . img{ Display:table-cell; Vertical-align:middle; width:400px; height:500px; Text-align:center; border: #CCC 1px solid; } /*IE7 does not support the method * *

Align elements horizontally and vertically using relative positioning

The

Centers elements horizontally with relative positioning: requires the element to have a fixed width, set the element's left:50%, so that the left boundary line of the element coincides with the centerline of the element's parent element, setting the Margin-left, the value being half of the negative element width, To move the element to the left half the width of the position, you can make the element horizontal centerline and the parent element of the centerline coincide, that is, to achieve the level of the element Center.
Example: let a container element horizontally centered, width: 960px;
width:960px position:relative; left:50%;
The above code is equivalent to the following code, Use margin:0 Auto; make elements centered and widely used, and everyone is familiar with
width:960px; margin:0 auto;
Use relative positioning to align the elements vertically: require the element to have a fixed height, set the element's top:50%, so that the top boundary of the element coincides with the vertical centerline of the element's parent element, set the Margin-top, and the value is half the height of the negative element, allowing the element to move up half the height You can make the vertical centerline of the element coincide with the centerline of the parent element, that is, to achieve the vertical center of the element.
The following is an example of the horizontal and vertical centering of elements using relative positioning, the parent element. box, which occupies a space width of 250px, height 150px; (Calculates the value of a padding)

code is as follows	copy code
.box{     width:300px;     height:200px;     border: #CCC 1px solid; } . Box span{     display:block;     width:240px;     height:140px;     Background-color: #CCC;     position:relative;     top:50%;     left:50%;     margin:-75px 0 0-125px;     padding:5px; }

What the example does: let span this element horizontally vertically in the. box, first turning span into a block-level element so that it can be centered horizontally using margin:0 auto; This is what we used to do, where we use relative positioning to implement.

Use Line-height to center single-line text vertically

This is the way we all often use, so that the title, buttons and other text vertically centered, Ie6/7/8/9/10,ff,chrome,safari support
.

The code is as follows	Copy Code
box_1{ width:300px; height:55px; line-height:55px; Text-align:center; border: #ccc 1px solid; }

Use absolute positioning to center elements horizontally vertically

The code is as follows	Copy Code
. box_2{ width:300px; height:200px; border: #CCC 1px solid; position:relative; top:0; left:0; } . box_2 span{ Display:block; width:240px; height:140px; Position:absolute; top:0; bottom:0; left:0; right:0; Margin:auto; Background-color: #ccc; padding:5px; } /*ie7 not supported, mobile end of Web page development can be used in this way * *