[CSS] How to vertically center elements in HTML

Summary of 3 commonly used methods to vertically center elements in HTML

In daily projects, we often encounter requirements for a certain element to be vertically centered on the parent element. The effect achieved:

initial HTML and css part:

<!-- 父元素 -->
<div class="parentBox">
  <!-- 子元素 -->
  <div class="childenBox">
  </div>
</div>

<!-- css -->
<style>
.parentBox {
      
      
  width: 800px;
  height: 500px;
  background: #ccc;
}
.childenBox {
      
      
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  color: #fff;
}
</style>

The following will introduce the three most commonly used methods to achieve vertical centering in CSS:

1. Use the line-height attribute to achieve

1. The parent element sets the value of the line-height attribute equal to the height of the parent element, and sets the value of the text-align attribute to center;
2. Set the child element to an inline block element and control the vertical-align attribute to control whether it is centered;

<!-- css -->
<style>
.parentBox {
      
      
  width: 800px;
  height: 500px;
  background: #ccc;
  text-align: center;  /* 水平居中 */
  line-height: 500px;  /* 行高等于高度的值 */
}
.childenBox {
      
      
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  color: #fff;
  display: inline-block;  /* 设置为行内块元素 */
  vertical-align: middle;  /* 行内居中 */
}
</style>

2. Use position positioning to achieve

1. Set relative positioning to the parent element position: relative;
2. Set absolute positioning for child elements position: absolute;
3. Give the child element top and left values ​​50%, and margin-left and margin-top each give the negative half of the width and height of the child element (Note: The reason why this is given here is because of the left and top values ​​​​of the positioned element. It is based on the upper left corner of the element as the base point. Similarly, right and bottom are based on the lower right corner of the element. Top: After 50%, the point in the upper left corner is already in the middle relative to the parent element, but with the addition of child elements As for its own height, the child element is lower than the height of the child element relative to the parent element, so it needs to be moved upward by half its height, and the same goes for left);

<!-- css -->
<style>
.parentBox {
      
      
  width: 800px;
  height: 500px;
  background: #ccc;
  position: relative;  /* 父级元素相对定位 */
}
.childenBox {
      
      
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  color: #fff;
  position: absolute;  /* 子级元素绝对定位 */
  left: 50%;
  top: 50%;
  margin-left: -100px;  /* 负宽度的一半 */
  margin-top: -100px;  /* 负高度的一半 */
}
</style>

3. Use flex layout to achieve

Set the flex layout for the parent element and control the horizontal and vertical centering of the child elements through the align-items and justify-content attributes.

<!-- css -->
<style>
.parentBox {
      
      
  width: 800px;
  height: 500px;
  background: #ccc;
  display: flex;  /* 设置flex布局 */
  align-items: center;  /* 直接子元素垂直居中 */
  justify-content: center;  /* 直接子元素水平居中 */
}
.childenBox {
      
      
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  color: #fff;
}
</style>

The above is personal experience, I hope it will be helpful to everyone!