How do CSS3 properties achieve horizontal centering and vertical centering?

How do CSS3 properties achieve horizontal centering and vertical centering?

With the development of web design, it is becoming more and more important to achieve horizontal and vertical centering of elements. In CSS3, these layout effects can be easily achieved using some properties and techniques. This article will introduce some commonly used CSS3 properties and code examples to help you achieve horizontal and vertical centering effects.

1. Horizontal centering

1. Use the text-align attribute for horizontal centering
Use the text-align attribute in the parent element to achieve horizontal centering of the child element.
Code example:

.parent {
  text-align: center;
}

.child {
  display: inline-block;
}

Child elements using display:inline-block will be horizontally centered in the parent element.

2. Use margin attributes for horizontal centering
Horizontal centering is achieved by setting margin-left:auto and margin-right:auto to child elements.
Code example:

.parent {
  text-align: center;
}

.child {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

Child elements using display:block will be horizontally centered in the parent element.

3. Use flexbox for horizontal centering
Using flexbox layout can achieve horizontal centering more flexibly.
Code example:

.parent {
  display: flex;
  justify-content: center;
}

.child {
  /* 子元素样式 */
}

Horizontal centering of child elements can be achieved by setting the display:flex and justify-content:center properties of the parent element.

2. Vertical centering

1. Use the line-height attribute for vertical centering
By setting the line-height attribute of the parent element equal to the height value of the parent element, a single line of text can be achieved Centered vertically.
Code example:

.parent {
  height: 100px;
  line-height: 100px;
}

.child {
  /* 子元素样式 */
}

By setting the line-height attribute equal to the height value of the parent element, the content of the child element will be vertically centered in the parent element.

2. Use the table attribute for vertical centering
Achieve vertical centering by setting the parent element to display:table, and setting the child element to display:table-cell, and then using vertical-align:middle .
Code example:

.parent {
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle;
}

Use display:table and display:table-cell to vertically center child elements within the parent element.

3. Use the transform attribute for vertical centering
By setting the parent element to position:relative, the child element to position:absolute, and using top:50% and transform:translateY(-50%) to achieve vertical centering.
Code example:

.parent {
  position: relative;
}

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

Use transform:translateY(-50%) to vertically center the child element within the parent element.

To sum up, by using some CSS3 properties and techniques, we can easily achieve horizontal centering and vertical centering of elements. According to actual needs, choose the appropriate method to achieve the layout effect. Hope this article is helpful to you.

The above is the detailed content of How do CSS3 properties achieve horizontal centering and vertical centering?. For more information, please follow other related articles on the PHP Chinese website!