Fit-content layout of pure css-elements horizontally vertically centered

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