DEV Community

CSS... I had a problem with positioning

machy44 on March 06, 2018

The problem which I had is that I couldn't get the loading spinner in the center of the table element. But in this post, we will play with div el...
Read full post
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.

Collapse
 
blouzada profile image
Bruno Louzada •

Nice post! Another great post is CSS box model

Collapse
 
machy44 profile image
machy44 •

Thank you..That's a great idea, I will consider it and try to explain on some practical problem