How to set css to center

Setting method: 1. Achieve horizontal centering through "margin: 0 auto; text-align: center"; 2. Achieve horizontal centering through "display:flex"; 3. Achieve horizontal centering through "display:table-cell" and "margin-left" to achieve centering.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

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 CSS horizontal centering.

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.

Related learning recommendations: css tutorial

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