Why magin:auto is not enough to center position absolute or fixed?

Question

I am trying to center the contents of a div, my parent container is set to Relative.

I am using this on the inner div

    position: absolute;
    mar         


        

Answer 1

You can use left and right properties when your elements has position absolute/relative You can center your inner element in both axises using just margin: auto; or on x-axis using margin: 0 auto;.

.parent{
  width: 200px;
  height: 200px;
  background: red;
}

.child{
  margin: auto;
  width: 70px;
  height: 70px;
  background: green;
}