Detailed explanation of CSS element centering

Horizontal centering

If it is an inline element, just use text-align:center on its parent element;

If it is a block element (no floating), there are generally two methods to achieve horizontal centering. One is margin: 0 auto; the other is through the CSS calculation function calc;

Vertical centering

If it is an inline element, generally use line-height:{height} for its parent element. If it is a picture element, you need to use vertical-align: middle;

In addition, we can know that the elements within the table element td can be vertically centered by using vertical-align:middle, and by using display:table-cell;vertical-align:middle; on the parent element. It is also possible to vertically center elements, and this method can be used for both inline elements and block elements; if

is a block element (inline elements will eventually become block elements using this method), then The vertical centering of elements can be achieved through some attributes such as position. The basic steps are: 1. Set the parent element position: relative; 2. Set the element position: absolute; top: 50%; left: 50%; 3. Set the element margin- top:-{height}/2;margin-left:-{width}/2;

Centering of floating elements

If For floating block elements (such as float:left), you need to use some attributes such as position to achieve the horizontal and vertical centering of the element. The basic steps are: 1. Put a p on the outer layer of the element and set its style: float:left;overflow: hidden; display: inlineblock; 2. Set the outer p position attribute to relative, and the top and left values ​​​​are both 50%; 3. Set the element style: transform: translate (-50%, -50%);

The above article about the centering of CSS elements is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more detailed explanations of css element centering and related articles, please pay attention to the PHP Chinese website!