Two ways to make elements vertically centered by using CSS

Article Introduction: using CSS to align elements vertically is a headache, and here are two simple and practical approaches.

Using CSS to align elements vertically is a big headache, here are two simple and practical ways

Method One: Using row height (line-height) to locate

Line-height is usually used to adjust the distance between lines of text, or the distance between two lines of text, if the line height is 500px, then the text in each row is 250px from the top of the line, if the line height of the text is set to 500px, And outside the height of the container is also 500px, can also achieve vertical center, but with it to achieve vertical center, there is a disadvantage, is that if the content is too much, the text will run to the next line, then the content can not be vertically centered.

HTML code:

CSS code:

Body {

margin:0;

padding:0;

Background: #1d1d1d;

font-size:10px;

Font-family:verdana, Arial, Helvetica, Sans-serif;

}

H1 {

Font:3em Georgia, "Times of New Roman", Times, serif;

Color: #fff;

height:500px;

line-height:500px;

Text-align:center;

border:10px solid #999;

}

H1 span {

Font-weight:bold;

Font-size:1.5em;

Color: #fff000;

}

p {

Font-size:1.3em;

Color: #999;

}

Strong {

Color: #fff;

}

Method two: Using absolute positioning

Let's take a look at the results and see the demo
This method has a disadvantage I must point out, is the outside of the block elements, must specify the height, so if you put the dynamic content in it, the consequences will be very bad drop ~

HTML code:

<div class= "Vert" >


<p>abigo sudo mara paulatim odio, Accumsan luptatum, nibh nibh refero metuo ut opes. Acsi et fere similis <strong>Using</strong> augue <strong>absolute</strong> validus. Regula <strong>positioning</strong> eu jus vel, indoles fere iaceo ea similis. Velit praemitto nulla vel luctus secundum. </p>

</div>

CSS code:
This vertical centering with absolute positioning depends on the width and height of the element, and you can use the following two formulas to calculate the left and top margins of the element

Element width/2 = negative left margin
Height of element/2 = negative top margin

In this case, that's what we're counting.

. vert {

width:580px;

height:190px;

Position:absolute;

top:50%;

left:50%;

Margin: -95px 0 0-290px;

}

Full CSS Code

Body {

margin:0;

padding:0;

Background: #1d1d1d;

font-size:10px;

Font-family:verdana, Arial, Helvetica, Sans-serif;

}

H1 {

Font:4em Georgia, "Times of New Roman", Times, serif;

Color: #fff;

border-bottom:5px dotted #999;

margin:0;

padding:0 0 10px;

}

H1 span {

Font-weight:bold;

Display:block;

Font-size:1.5em;

Color: #fff000;

}

p {

Font-size:1.3em;

Color: #999;

}

Strong {

Color: #fff;

}

. vert {

width:580px;

height:190px;

Position:absolute;

top:50%;

left:50%;

Margin: -95px 0 0-290px;

}

Problem extension

If there is a parent element outside of the element, if the element can be centered vertically within the parent element? For example, the following code, one more parent element

<div class= "Container" >

<div class= "Vert" >


<p>abigo sudo mara paulatim odio, Accumsan luptatum, nibh nibh refero metuo ut opes. Acsi et fere similis <strong>Using</strong> augue <strong>absolute</strong> validus. Regula <strong>positioning</strong> eu jus vel, indoles fere iaceo ea similis. Velit praemitto nulla vel luctus secundum. </p>

</div>

</div>

At this point, you must add position:relative to the CSS code that defines the parent element to be able to center the inner element vertically within the parent, as follows:

. container {

position:relative;

height:500px;

width:800px;

border:10px solid #999;

Background: #000;

margin:20px;

}