css centered

css centering: 1. Horizontal centering is achieved through "margin: 0 auto; text-align: center"; 2. Horizontal centering is achieved through "display:flex"; 3. Horizontal centering is achieved through "display:table-cell" and "margin-left" to achieve centering.

#How to set the centering of css:

1. Use margin: 0 auto; text-align: center to achieve horizontal centering of CSS .

This method is the most commonly used to achieve horizontal centering of CSS. About 60% of the horizontal centering of CSS in front-end development is achieved through "margin: 0 auto; text-align: center".

2. Use display:flex to achieve horizontal centering of CSS.

With more and more flexbox compatible, the solution of horizontally centering CSS through "display:flex" is becoming more and more popular.

The principle of achieving CSS horizontal centering through display:flex is that the parent element display:flex;flex-direction:column; and the child element align-self:center;

This is vertically centered with CSS The principle is the same, but there is a difference in flex-direction. One is row (default value) and the other is column.

3. Implement CSS horizontal centering through display:table-cell and margin-left.

For situations where the width of both the parent element and the child element is determined, it is suitable to implement CSS horizontal centering through display:table-cell and margin-left.

When used, the parent element displays:table-cell, and the child element is given a margin-left of half the remaining width.

The above is the detailed content of css centered. For more information, please follow other related articles on the PHP Chinese website!