What is the css centering code?

css centering codes include: 1. "vertical-align:middle"; 2. "display:flex"; 3. Set "display:table" for the parent element and "display:table-cell" for the child element "Can realize CSS vertical centering and so on.

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

Recommendation: css video tutorial

Implementing CSS vertical centering through vertical-align:middle is the most commonly used method, but there is one thing that needs special attention. Vertical takes effect. The premise is that the element's display: inline-block. Because inline-block can have the characteristics of both inline elements and block-level elements, it can make elements have width and height. Thus, centering can be achieved within the box

The way to achieve CSS vertical centering through display:flex is to give the parent element display:flex; and the child element align-self:center;

This is the same principle as CSS horizontal centering, but it is different in flex-direction. One is row (default value) and the other is column.

Give the parent element display: table, and the child element display: table-cell to implement CSS vertical centering. The table is also a commonly used centering mode. The disadvantage is that it will affect the following elements. Some styles cause certain effects, and it is not recommended to use this method frequently.

First give the parent element position: relative, then give the child element position: absolute, and use translateY to position it vertically in the center. This is centered on the vertical axis. The new feature of CSS3, translate, can change the offset of the element on the vertical axis.

Set the line-height value of the child element equal to the height of the parent element. This method is suitable for cases where the child element is a single line of text. The vertical axis is also centered.

Including information:

Cascading Style Sheets (full English name: Cascading Style Sheets) is a type of HTML (Standard Universal Markup Language) used to express application) or XML (a subset of Standard Generalized Markup Language). CSS can not only statically modify web pages, but can also cooperate with various scripting languages ​​to dynamically format various elements of web pages.

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