How to center up and down in css

CSS is a language used for web design and is widely used in the layout and styling of web pages. In web design, a very common problem is how to achieve a top-bottom centered layout. This article will introduce several methods in CSS that can help you easily achieve the effect of centering top and bottom.

Method 1: Use display:flex

display:flex is a new layout method in CSS3, which can quickly achieve various complex layout effects. It can also be used to achieve the effect of centering the top and bottom.

HTML code:

<div class="parent">
  <div class="child">
    这是一段文字。
  </div>
</div>

CSS code:

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 400px;
}

.child {
  text-align: center;
}

Method analysis:

Use display:flex to achieve top and bottom centering, first you need to set the parent element For flex layout, then set the justify-content:center and align-items:center properties to achieve horizontal and vertical centering effects respectively.

In the above code, the height of the parent element is set to 400px, which can be adjusted as needed. The text-align:center attribute of child elements can center the text content horizontally.

Method 2: Use position:absolute

Using position:absolute can also achieve the effect of centering the top and bottom. However, it should be noted that this method is suitable for elements with a known height, because the margin-top and margin-bottom properties of the element need to be set.

HTML code:

<div class="parent">
  <div class="child">
    这是一段文字。
  </div>
</div>

CSS code:

.parent {
  position: relative;
  height: 400px;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Method analysis:

Use position:absolute to achieve top and bottom centering, first you need to set the parent element is position:relative, and then set the position attribute of the child element to absolute so that the child element can be positioned relative to the parent element. Next, use top:50% to move the upper edge of the child element to the middle of the parent element. However, you still need to adjust the position of the child element. You can use translateY(-50%) in the transform attribute to achieve this. The element is translated upward by 50% of its height, thus achieving the effect of centering it up and down.

It should be noted that the height of the parent element in the above code is set to 400px only for demonstration purposes. In actual applications, it needs to be adjusted according to the actual situation.

Method 3: Use table-cell

In CSS, table-cell is a table cell layout method. Although it is not very commonly used, it can achieve a more precise layout.

HTML code:

<div class="parent">
  <div class="child">
    这是一段文字。
  </div>
</div>

CSS code:

.parent {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  height: 400px;
}

.child {
  display: inline-block;
  vertical-align: middle;
}

Method analysis:

Use table-cell to achieve top and bottom centering, you need to change the display of the parent element Set the attribute to table-cell, and set the text-align:center and vertical-align:middle attributes to achieve horizontal and vertical centering effects respectively. It should be noted that the height of the parent element must be set, otherwise top and bottom centering cannot be achieved.

The display attribute of the child element must be set to inline-block, and the vertical-align:middle attribute also needs to be set so that the child element is vertically centered relative to the parent element. The advantage of this method is that it can achieve a more precise layout and is suitable for a variety of elements with known heights.

To sum up, there are many ways to achieve the top and bottom centering effect, and the applicable situations are also different. You can choose the appropriate method for implementation based on specific needs.

The above is the detailed content of How to center up and down in css. For more information, please follow other related articles on the PHP Chinese website!