There are many ways to achieve horizontal vertical centering of an element:
- Element Unknown width high
Fit-content values for width and height only support Chrome and Firefox browsers
1 . Box{2 position:Absolute;3 Top:0;4 Left:0;5 Bottom:0;6 Right:0;7 margin:Auto;8 width:fit-content;9 width:-webkit-fit-content;Ten width:-moz-fit-content; One Height:fit-content; A Height:-webkit-fit-content; - Height:-moz-fit-content; - Overflow:Hidden; the text-align:Center; - Background-color:#eee; -}
- element is known to be wide and high
We should be very familiar with this, but also the actual development of the use of the most, recommended to just the small partners to get started.
Set its parent element to position:relative:
The first way:
1 . Children{2 position:Absolute;3 Top:0;4 Bottom:0;5 Left:0;6 Right:0;7 margin:Auto;8 width:300px;9 Height:200px;Ten Background-color:#5f9a3f; One}
The second way:
1 . Children{2 position:Absolute;3 Top:50%;4 Left:50%;5 margin:-100px 0 0-150px;6 width:300px;7 Height:200px;8 Background-color:#5f9a3f;9}
The Third Way:
Use the Translate property of the CSS3 new property transform
1 . Children{2 position:Absolute;3 Top:50%;4 Left:50%;5 Transform:Translate ( -50%,-50%);6 width:300px;7 Height:200px;8 Background-color:#5f9a3f;9}
Thank you for reading and you are welcome to vomit.
Fit-content layout of pure css-elements horizontally vertically centered