How to vertically center an element

Methods to vertically center an element: 1. Use the "line-height" attribute to achieve vertical centering of a single-line inline element; 2. Use flex layout to achieve vertical centering; 3. Use "absolute negative margin" to achieve Block-level elements are vertically centered.

Vertical centering

1. Single-line inline elements are vertically centered

<div id="box">
     <span>单行内联元素垂直居中。</span>。
</div>
<style>
 #box {
    height: 120px;
    line-height: 120px;
    border: 2px dashed #f69c55;
    }
</style>

2. Vertically center multi-line inline elements

①Use flex layout (flex)

Use flex layout to achieve vertical centering, where flex-direction: column defines the main axis direction as vertical. This method has compatibility issues with older browsers.

<div class="parent">
    <p>Dance like nobody is watching, code like everybody is.    
    Dance like nobody is watching, code like everybody is.    
    Dance like nobody is watching, code like everybody is.</p>
</div>
<style>
    .parent { 
        height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 2px dashed #f69c55;
    }
</style>

②Use table layout (table)

Use vertical-align: middle of table layout to achieve vertical centering of child elements

<div class="parent">
    <p class="child">The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.</p>
</div>
 <style>
    .parent {
        display: table;
        height: 140px;
        border: 2px dashed #f69c55;
    }
    .child {
        display: table-cell;
        vertical-align: middle;
    }
</style>

3 Vertically center block-level elements

①Use absolute negative margin (known height and width)

By absolutely positioning the element 50% from the top, and setting margin-top to offset the height of the element upward Half of it can be achieved.

<div class="parent">
    <div class="child">固定高度的块级元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}

②Use absolute transform

When the height and width of the vertically centered element are unknown, you can use the transform attribute in CSS3 to offset the Y-axis by 50% to achieve vertical centering. . However, some browsers have compatibility issues.

<div class="parent">
    <div class="child">未知高度的块级元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

③Use flex align-items

Make the child elements vertically centered by setting the attribute align-items in the flex layout.

<div class="parent">
    <div class="child">未知高度的块级元素垂直居中。</div>
</div>
.parent {
    display:flex;
    align-items:center;
}

④Use table-cell vertical-align

By converting the parent element into a table cell display (similar to and ), and then by setting vertical- The align attribute makes the table cell content vertically centered.

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent {
    display: table-cell;
    vertical-align: middle;
  }
</style>

Recommended learning: "front-end video"

The above is the detailed content of How to vertically center an element. For more information, please follow other related articles on the PHP Chinese website!