Summary: Use css to set the element to vertical center

As a front-end siege engineer, when making Web pages, I have encountered CSS horizontal and vertical centering. I think everyone has studied or written about it, especially the vertical centering, which is even more annoying. The following is This article mainly introduces to you the solutions to using CSS to set the vertical centering of elements. With these methods, you will not have to worry about it. Friends who need it can refer to it.

Preface

The vertical centering of elements is also a problem we often encounter in daily web page layout. This article mainly introduces it to you. Regarding the solution to using CSS to set the vertical centering of elements, the article introduces a variety of solutions to various situations. I believe it will be helpful to friends who encounter this problem. I won’t say much below, let’s take a look. See the detailed introduction.

html code:

<p class="parent">
<p class="child">Text here</p>
</p>

Since you set the vertical centering of the child element, you need to know the height of the parent element to know Where is the so-called center, right? Just like if you want to stand in the middle of a distance, then you first need to know how long the distance is before you can know where the middle is.
Note, all my The percentage height and width are all based on settings such as html,body {width: 100%;height: 100%;}. If you do not set it like this, .parent is the parent of p. The element is body, and if you don’t set the width and height of body, you may not see the effect. The aspect ratio of the .parent p is relative to its parent element, so you need to confirm the .parent p when using it. The parent element has set width and height.

(1) Inline text is vertically centered

css code:

.parent {
    height: 100px;
    border: 1px solid #ccc; /*设置border是为了方便查看效果*/
}
.child {
    line-height: 100px;
}

(2) Vertically center non-text within the line (take img as an example)

html code :

<p class="parent">
    <img src="image.png" alt="" />
</p>

css code

.parent {
    height: 100px;
    border: 1px solid #ccc; /*设置border是为了方便查看效果*/
}
.parent img {
    //注意此时应该保证图片自身的高度或者你设置的高度小于父元素的200px的行高,不然你看不出来居中的效果.
    line-height: 100px;
}

(3) Vertically center block-level elements of unknown height

html code:

<p class="parent">
  <p class="child">
    <!--.child的高度未知,父元素要有高度-->
    sddvsds dfvsdvds
  </p>
</p>

The first method ( No need to add padding):

css code:

.parent {
  width: 100%;
  height: 100%;
  position: relative;
  /*display: table;*/
}
.child {
  width: 500px;
  border: 1px solid #ccc; /*设置border是为了方便查看效果*/
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Second method (without transform):

css code:

.parent {
    position: relative;
    width: 100%;
    height: 100%;
}
.child {
  width: 500px;
  border: 1px solid #ccc;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  margin: auto;
}

The third method (requires padding):

css code:

#parent {
  padding: 5% 0;
}
#child {
  padding: 10% 0;
}

Fourth method:

(Use display: table , this method is also suitable for centering inline text elements):

css code:

.parent {
  width: 100%;
  height: 100%;
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

The fifth method ( Flex layout, compatibility needs to be considered here!)

css code:

.parent {
    width: 100%;
    height: 100%; /*这里一定要写高度奥!*/
    display: flex;
    align-items: center;
    justify-content: center;
  }

(4 ) Block-level elements of known height are vertically centered

html code:

<p class="parent">
  <p class="child">
    <!--.child的高度已知,父元素高度已知-->
    sddvsds dfvsdvds
  </p>
</p>

css code:

#parent {
  height: 300px;
}
#child {
  height: 40px;
  margin-top: 130px; /*这个只为父元素的高度减去这个元素的高度除以二计算得到的*/
  border: 1px solid #ccc;
}

The above are some of the feasible methods that I have discovered and personally tested. There should be other methods

The above is the detailed content of Summary: Use css to set the element to vertical center. For more information, please follow other related articles on the PHP Chinese website!