CSS absolute centering

Recently i’ve came across this method used to position an element both horizontally and vertically to the center. However, I wasn’t able to figure out what each of the property is doing. Would someone be able to explain to me what is the effect upon setting top:0, bottom:0, left:0, right:0?

(Would be great if you’re able to explain it using layman’s term or provide an illustrative image.)

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>


Source: css3

Leave a Reply