How to use CSS to achieve centered layout (code code)

In web design, centering is a very common layout method. Many web designs now use centered layout to give users a better experience, and the CSS centered implementation is also very simple and important.

Let’s discuss how to use CSS code to achieve centered layout in front-end development.

Basic concepts of centering

Before starting to learn centered CSS code, you first need to understand several basic concepts.

1. Horizontal centering: The horizontal direction is centered, usually applied when the width of page elements is not 100%, such as text boxes, buttons, etc.
2. Vertical centering: The vertical direction is center alignment. It is usually applied when the height of page elements is not 100%, such as single line of text, pictures, etc.
3. Horizontal and vertical centering: Center alignment both horizontally and vertically at the same time.

Horizontal centering

There are many ways to achieve horizontal centering layout, but their essence is to equalize the left and right margins of the element.

1. text-align

This is the most commonly used method, suitable for when the parent element is a block-level element (such as a div) and is Set properties on inline elements (such as text).

父元素 {
    text-align: center;
}
子元素 {
    display: inline-block;
}

This method requires setting the child element to inline-block to achieve alignment, otherwise it can only be achieved using the margin method.

2. margin

This method is also commonly used and is suitable when both the parent element and the child element are block-level elements, and the width of the child element is fixed. By setting the left and right margins to auto, make the margins on both sides equal and center the element.

父元素 {
    width: 60%;
}
子元素 {
    width: 80%;
    margin: 0 auto;
}

Note that this layout method requires the parent element to set the width, otherwise the child elements cannot be aligned.

3. flex

If your layout is using flexbox, then you can use the following CSS code to center the element horizontally.

父元素 {
    display: flex;
    justify-content: center;
}

The above code will center the child element in the x-axis direction.

4. grid

If you use grid layout, you can use the following CSS styles to align elements horizontally. The

父元素 {
    display: grid;
    place-items: center;
}

place-items property can align child elements both horizontally and vertically, as can be seen in the summary below.

Vertical centering

There are also many ways to implement vertical centering layout. Here are a few methods.

1. line-height

This is a very simple and commonly used method, suitable for single lines of text and images. Vertical alignment can be achieved by setting the same line-height value to the parent element and child element.

父元素 {
    line-height: 100px;
}
子元素 {
    line-height: 100px;
}

It should be noted here that the height of the parent element must be an integer multiple of the child element.

2. absolute

This method sets the position attribute of the child element to absolute, and then uses top and bottom to align it.

父元素 {
    position: relative;
    height: 200px;
}
子元素 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

This method is suitable for cases where the height of the container is fixed and the height of the child elements is unknown.

3. flex

This method requires using the flexbox layout of the container, and then using align-items and The justify-content property aligns child elements vertically and horizontally in the center.

父元素 {
    display: flex;
    align-items: center;
    justify-content: center;
}

The above code will center the child element in the y-axis direction.

Horizontal and vertical centering

If you want to align elements horizontally and vertically, you can combine more than two methods to achieve it.

The following code will implement a horizontally and vertically centered layout:

父元素 {
    display: flex;
    align-items: center;
    justify-content: center;
}

The above code will center the child elements on the x and y coordinate axes.

Summary

In front-end design, achieving centered layout is a very important part. Hopefully this article helps you better understand how centered code is implemented. Using methods such as text-align, margin, flex, grid, and absolute, elements can be aligned and centered in both horizontal and vertical directions. With the help of these methods and properties, you can easily create web pages with good UI design.

The above is the detailed content of How to use CSS to achieve centered layout (code code). For more information, please follow other related articles on the PHP Chinese website!