How to set the box center in css

In CSS, you can use multiple methods to center the box: horizontal centering: margin: 0 auto; vertical centering: vertical-align: middle; horizontal and vertical centering: display: flex; justify-content: center ; align-items: center;

Box center setting in CSS

In CSS, you can use a variety of Method to center align the box.

Horizontal center

• margin: 0 auto;: This is the most commonly used method, which aligns the box horizontally to the center of the parent element .
• text-align: center;: Only center-align the text within the box.

Vertical center

• ##vertical-align: middle;: Center the box vertically to align the parent element.
• line-height: Set the height of the box so that the text inside the box is vertically centered. (Applicable to single line text)
• display: flex; align-items: center;: Use flexbox layout to vertically center the box to align the parent element. (For multi-line text)

Horizontal and vertical centering

##transform: translate(-50%, -50%) ;
• : Use CSS transform to center the box horizontally and vertically at the same time.
display: flex; justify-content: center; align-items: center;
• : Use flexbox layout to center-align the box horizontally and vertically at the same time.

Sample code:

.container {
  width: 200px;
  height: 100px;
  margin: 0 auto;  /* 水平居中 */
  text-align: center;  /* 文本水平居中 */
  vertical-align: middle;  /* 垂直居中 */
}

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