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: the container for this element is set to Table-cell, that is, the feature with the table cell, and then the Vertical-align (this property does not work on the block element but is valid for the Table-cell element) The setting element is centered vertically to achieve the effect we want.

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

Use relative positioning to align elements horizontally: require an element to have a fixed width, set the element's left:50%, so that the left border of the element coincides with the horizontal centerline of the element's parent element, set the Margin-left, and the value is half the width of the negative element, leaving the element to the left half width You can make the center line of the element horizontally coincide with the centerline of the parent element, that is, the horizontal center of the element is achieved.

For example: let a container element horizontally centered display, Width: 960px;

width:960px; position:relative; left:50%; margin-left:-480px;

The above code is equivalent to the following code, using Margin:0 Auto, centering the elements, being widely used, and everyone is familiar with it.

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.

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

The code is as follows
. 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
box_1{ width:300px; height:55px; line-height:55px; Text-align:center; border: #ccc 1px solid; }

Use absolute positioning to center elements horizontally vertically

code is as follows

&nbs P;

. 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 is not supported, Web page development on the mobile side can be used this way */