How Can I Vertically Center Elements in CSS?

Vertically Centering Elements Using CSS Techniques

Centering elements vertically within a div can be achieved using various CSS methods. Here are two common approaches:

Flexbox Method

Flexbox provides a versatile layout system that allows for flexible item alignment. To vertically center elements using Flexbox, follow these steps:

1. Set the parent container to have a flex display using display: flex.
2. Specify a flex-direction of column to stack elements vertically.
3. Align items vertically using justify-content: center.

For example, here's a CSS snippet using Flexbox:

#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Table and Positioning Method

This method utilizes the table display and positioning:

1. Set the body to a display: table to establish the table-like structure.
2. Set the parent container to display: table-cell and vertical-align: middle to align the content vertically.
3. Center the elements using margin: 0 auto.

Here's the CSS code for this method:

body {
  display: table;
}

#container {
  display: table-cell;
  vertical-align: middle;
}

.box {
  margin: 0 auto;
}

Which Method to Choose?

Flexbox is generally preferred due to its simplicity, efficiency, and wide range of layout options. However, if support for older browsers is a concern, the table and positioning method can be adopted.

The above is the detailed content of How Can I Vertically Center Elements in CSS?. For more information, please follow other related articles on the PHP Chinese website!