Center css elements and center css Elements

Center css elements and center css Elements
Horizontal Center

If it is a row element, use text-align: center for its parent element;

If it is a block element (not floating), there are two ways to horizontally center it, one is margin: 0 auto; the other is to calculate the function calc through css;

Vertical center

If it is a row element, line-height: {height} is generally used for its parent element. If it is an image element, vertical-align: middle must be used for this element;

In addition, you can use vertical-align: middle to vertically center the elements in table element td, and use display: table-cell; vertical-align: you can also vertically center an element. This method can be used regardless of the element in the row or block element;

If it is a block element (the row element will eventually become a block element when this method is used), you can use the position and other attributes to vertically center the element. The basic steps are as follows: 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;

 

Center of floating Element

If it is a floating block element (such as float: left), you need to use the position and other attributes to realize the horizontal vertical center of the element. The basic steps are as follows: 1. the outer layer of the element sets a div and sets its style: float: left; overflow: hidden; display: inlineblock; 2. set the position attribute of the outer div to relative, and set the top and left values to 50%. 3. set the element style: transform: translate (-50%,-50% );