CODEWITHSUNDEEP
css
Gray
Gray

Reputation: 11

Aligning element to the page with CSS

I'm trying to mantain a circle centered to the page with media screen. I'm using the css code "margin: 0 auto;" but, for some reason, it doesn't keep the circle in the center of the page.

CSS:

.dot {
height:550px;
width: 550px;
margin: 0 auto;
margin-top: 8%;
margin-bottom: 2.5%;
}

Upvotes: 0

Views: 21

Answers (1)

Mordecai
Mordecai

Reputation: 1494

You can try absolute centering.

.dot {
  height:550px;
  width: 550px;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  margin: auto;
  border:2px solid;
  border-radius:100%
}
<div class="dot"></div>

Upvotes: 1

Related Questions