Css center, css

Css center, css

1. Set margin to atuo

Margin: Set all margin attributes in a declaration. This attribute can have 1 to 4 values.

Specifically, the margin-left and margin-right values of the elements to be centered are set to auto. This method can only be horizontally centered,It is invalid for floating or absolute positioning elements..

<! DOCTYPE html> 
 
Result:

2. Center text-align
In the text-align attribute rule ElementText (only images, buttons, text, and other line elements (display is inline or inline-block ))Horizontal Alignment.
This attribute sets the horizontal alignment of text in block-level elements by specifying the point to which the row box is aligned. The value of justify can be supported by allowing the user agent to adjust the interval between letters and words in the row content. Different user agents may obtain different results.
 
<! DOCTYPE html> 
 
The result is as follows:

　　Analysis: The text-align: center attribute is added to the div of test 1. Therefore, the text is centered. The div of test 2 does not contain text-align: center, so it is left by default. However, the text in the div is centered.
3. Use absolute positioning to center (horizontal and vertical center)
This method applies only to elements that we already know their width and height.
Principle: by setting the left or top attribute of the absolute positioning element to 50%, the element is not centered at this time, instead, it is half the width or height of the element to the right or left of the center position, therefore, we need to use a negative value of margin-left or margin-top to pull it back to the center.NegativeThe value of margin takes half of the width or height of the element.
<! DOCTYPE html> 
The result is as follows:

4. other absolute positioning methods (center horizontally and vertically)
Only applicable to elements that know the height and width.
Only modern browsers that comply with w3c standards such as IE9 +, Google, and Firefox are supported.
Demo:
<! DOCTYPE html> 
 
The result is as follows:

Thank you: Thank you for reading this article!