CSS vertical center_html/css_WEB-ITnose

1. Vertical centering: single-line inline element solution

Centered element: single-line inline element, that is, inline or inline-* type element, such as Text, links, etc.

Solution: Set the height and inline-height of the inline element to the height of its parent element

HTML

CSS

#container {

background: #222;

height: 200px;

}
a {
/* height: 200px; */
line-height: 200px;
color: #fff;
}

2. Vertical centering: multiple lines Solution for inline elements

Centered elements: Inline elements for multiple lines

Solution: Use a combination of display:table-cell and vertical-align:middle attributes to define elements that need to be centered The parent element of

HTML

, consectetur adipisicing elit. 🎜> div >

CSS


#container {
width: 300px;

height: 300px; background: #222;

/* The following properties are vertically centered */

display: table-cell;

vertical-align: middle;

}
a {
color: #fff;
}





3. Vertical centering: block element solution with known height

Centered element: block-level element, such as div

Solution: Set the element to be centered to absolute positioning and set its margin-top value to a negative value that is half the height of the element to be centered.

HTML

div >

CSS

div {
width: 100px;

height: 100px; background: #222;

}

/* The following is the centering code*/

.item {

position: absolute;
top: 50%;
margin-top: -50px;
padding: 0; /* If there is padding setting, calculate the value of margin-top*/
}





4. Vertical centering: solution for block elements of unknown height

Centered element: block-level element, such as div, but its height is unknown

Solution: Use CSS3 transform attribute

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet sint repellendus aut quisquam eligendi est in deleniti.

div >

width: 150px;

background: #222;

color: #fff;

}

/* The following is the centering code*/
.item {
position: absolute ;

top: 50%; transform: translateY(-50%);

}

5. Horizontal and vertical centering: Already Element solution that knows width and height

Centering type: Centered vertically and horizontally at the same time (provided the height and width of the element are known)

Solution: Set the element to be positioned absolutely, and set margin-top (height/2) and margin-left values Is the negative value of (width/2)

HTML

div >

CSS

div {
width: 150px;
height: 250px;
background: #222;
color: #fff;
}
/* The following is the centering code*/
.item {
position: absolute;
top: 50%;
left: 50%;
margin-top: -125px;
margin-left: -75px;
}

6. Horizontal and vertical centering: solution to unknown element height and width

Centering type: horizontal and vertical centering (provided that the width and height of the element are unknown)

Solution: Set the element to absolute positioning and use the CSS3 transform attribute

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nostrum quaerat debitis.
div >

CSS

div {
background: #222;
color: #fff;
}
/* The following is the centering code*/
.item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

7. Horizontal and vertical centering: Use flex layout to achieve

Solution: Set up flex layout and set the justify of the parent element of the centered element. -content and align-items attributes are center

HTML

div >

CSS

.item {
width: 100px;
height: 100px;
background: # 222;
}
/* The following is the centering code*/
.parent {
display: flex;
justify-content: center;
align-items : center;
/* Need to set height to see vertical centering effect*/
background: #ccc;
height: 300px;
}