DEV Community

Discussion on: CSS... I had a problem with positioning

Collapse
 
mbtts profile image
mbtts

Nicely written article and well explained.

Apologies if already familiar, but another solution for centring vertically and horizontally is using flex box:
css-tricks.com/snippets/css/a-guid...

One benefit is the loader ruleset does not need to declare any positioning rules - instead it infers its location from the rules defined in the parent (specifically justify-content (vertical in this case) and align-items (horizontal in this case)).

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  height: 80%;
  width: 70%;
  background-color: #E37222;
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

There is a game here for learning flexbox: flexboxfroggy.com/.

Collapse
 
machy44 profile image
machy44 • Edited

No need for apologies :)..thank you for your solution. I played flexboxfroggy and I think that it's awesome for learning flex. I can't remember why I didn't use it but there must be some reason :D.