Absolute CSS Centering

Question

I recently came across this method, used to position an element both horizontally and vertically in the center. However, I could not understand what each of the properties does. Can someone explain to me what affects setting top:0, bottom:0, left:0, right:0 ?

(It would be great if you can explain this using the term layman or provide an illustration.)

Also, what is the use of setting the display to table?

 .absolute-center { position: absolute; display: table; height: auto; width: 500px; margin: auto; top: 0; bottom: 0; right: 0; left: 0; border: solid 1px red; } 

 <p class="absolute-center">What is this sorcery?</p> 

Answer 1

You can decrease the css value:

 .absolute-center { position:absolute; width: 500px; height: 100px; margin: auto; top: 0; bottom: 0; right: 0; left: 0; border: solid 1px red; } 

 <p class="absolute-center">What is this sorcery?</p> 

Absolute element with properties of type bottom: 0; top: 0; left: 0; right: 0; bottom: 0; top: 0; left: 0; right: 0; will fill all the space.

So what's the secret / witchcraft?

You determine the width and height of the element. Therefore, even if he wants to fill the entire space, he will be limited by your width and height.

Secret margin: auto , why? Because the element will fill in the remaining distance using the field. Thus, since you determined the width and height, it will have this size, but the margin will fill the rest of the container / parent with the auto method, equal to the size of both sides.

Due to margin:auto you need to determine the width and height.

Answer 2

Let it break a bit:

If you have the following CSS (I apply it to your current markup):

 .absolute-center { position:absolute; height: auto; margin: auto; background: red; top: 0; bottom: 0; right: 0; left: 0; } 

You can see that div.absolute-center fills the entire parent element (in this case, body ) by simply setting all the top , bottom , right and left properties.

Demo: http://jsfiddle.net/0osLv27k/

Therefore, when we add width (optionally height ) to the previous CSS, this element is limited to this size.

Demo: http://jsfiddle.net/0osLv27k/1/

And finally, the magic margin: auto , which makes the element centered.

Demo: http://jsfiddle.net/0osLv27k/2/

Answer 3

You only need to add the top and left positions and add the transformation. If you do not need a fixed width, there is no problem removing the width from css, and also if you want the text centered inside p add an addition, delete it. Try the following:

 .absolute-center { position:absolute; width: 500px; padding:50px 0; top: 50%; left: 50%; border: solid 1px red; text-align:center; transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); display:inline-block; vertical-align:middle; } 

 <p class="absolute-center">asdsdada</p> 

Answer 4

Check it out ... HTML

 <p class="absolute-center"></p> 

CSS

 .absolute-center { margin: auto; background: red; width: 100px; height: 100px; position:absolute; top: 0; bottom: 0; right: 0; left: 0; }