-1

I am using flexbox and already succeed to make it centered horizontally, at you can see by running the snippet below, but it is not centered vertically and I don't get why

Here is a JSFiddle if you prefer. 

.main {
  display: flex;
  align-items: center;
  justify-content: center;
}


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

  max-width: 50%;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
<div class="main">
    <div class="loader"></div>
</div>
Ced
  • 1,293
  • 5
  • 23
  • 34
  • It is centered vertically but the .main div needs a height to get bigger than it's content. – Olafant Feb 04 '19 at 15:24
  • Please downgrading is a bit hard, it is already tag as duplicate I think this is enough, your reaction is not friendly toward others users. – Ced Feb 04 '19 at 15:28
  • 2
    I think you're right. Downgrading is not necessary. So I didn't. That your question is marked as duplicate is nothing to worry about. It's just for other users to know. ;) – Olafant Feb 04 '19 at 15:37
  • 1
    Actually I think the marking of that question as a duplicate is wrong. The second link doesn't even address the problem. OP's question is about an unexpected result of his proper use of align-items in flex layout and not how to set the height of a div. – Olafant Feb 04 '19 at 15:55
  • I completely agree with you, thank you for your comments. – Ced Feb 04 '19 at 16:17
  • 1
    Please refer to this site http://the-echoplex.net/flexyboxes/ if you get stuck with flexbox in the future. It helps you visualize the output and generates the basic code. I won't just copy and past the output as it is quite verbose. But give it a spin it's really helpful. – henk.io Feb 04 '19 at 17:48
  • @Olafant read the answer below and the accepted ones and you will notice that the issue is setting the element to have the height of the screen thus the first duplicate that answer this more that perfectly. The second duplicate is about centring which is the purpose of his code and within this duplicate you will find complete way of centring that consider the height issue. So the first duplicate show him the missing CSS to add to his code and the second one show him complete and working way to center in all the screen if of course we take the time to read them carefully. – Temani Afif Feb 04 '19 at 23:00
  • @Olafant as a proof of the duplicate, here is from the 2nd one : https://stackoverflow.com/a/41164964/8620333 and here is from the 1st one: https://stackoverflow.com/a/16837667/8620333 ... if you still thing it's wrongly closed, then show me that there is no answer adressing his issue in both. – Temani Afif Feb 04 '19 at 23:02
  • 1
    @TemaniAfif thanks for your advice how to prove my point. Please don't feel offended if I use an allegory instead. Q.A: How to not get wet in the rain? A.A: Use an umbrella! Q.B: Why did I get wet even though I used an umbrella? A.B: You need to open it! I don't think of Q.B as a duplicate of Q.A. Anyway: I see your point. But I think it's important for SO to be very careful not to discourage ppl from asking specific questions by marking them as duplicates of broader ones. – Olafant Feb 05 '19 at 06:52
  • @Olafant first, closing a question as duplicate is never a bad think and actually is the best think. Compare the accepted answer below with the one of the duplicate and tell me which one is better. An answer that tell you *use this and it will work, don't ask me why or no need to know why, do a copy paste and it will work* Or an answer that tell you and give the explanation of the *why*? You want me to teach of to fish or to give you a fish each time you need it? – Temani Afif Feb 05 '19 at 08:29
  • @Olafant Second, concerning your allegory you simply confirm the duplicate because SO is to build a high quality Q&A, so Q.A and Q.B are the same because you need to do the effort to carefully read Q&A in order to understand that you also need to open the umbrella, and opening the umbrella isn't enough, you need to hold it above your hear also. The duplicate question deals with all the umbrella aspect and doesn't simply tell you *you need to use umbrella* ... the below answer does this because there is 0 explanation but within the duplicate you will learn how to correctly use the umbrella. – Temani Afif Feb 05 '19 at 08:34
  • 1
    @TemaniAfif Actually the accepted answer explains exactly why OP's approach failed in the first line. So does my [comment](https://stackoverflow.com/questions/54519137/flexbox-how-to-center-vertically?noredirect=1#comment95841338_54519137). Whereas https://stackoverflow.com/a/41164964/8620333 gives only the fish. – Olafant Feb 05 '19 at 09:09
  • @Olafant this is from the second duplicate, I meant the first one from the first duplicate (https://stackoverflow.com/q/1575141/8620333). as I said the second duplicate deals with the whole centring issue whereas the first one deals with the height issue and the whole question including all the answers/comments/links is what will teach you how to fish, not only 1 asnwer. There is 70+ answers in both duplicates. Taking the time to go through all of them will solve the issue and will teach more than what you need but no one do this, we simply read the title then complain it's not a duplicate... – Temani Afif Feb 05 '19 at 09:16
  • 1
    @TemaniAfif As I already said: I see your point. I tried to explain my POV. If "...we simply read the title then complain it's not a duplicate..." is what you think I did here, you don't seem to be open to consider other opinions. I agree with you that marking duplicates is [good](https://stackoverflow.com/questions/54519137/flexbox-how-to-center-vertically?noredirect=1#comment95841813_54519137) for SO's quality. Just don't forget that there is no quality to take care of without people willing to ask questions or to debate how to reach high quality. No hard feelings! – Olafant Feb 05 '19 at 09:50
  • Hey! I have been banned to ask question, I find this sanction harsh. I need positive upvote could you please help me at least to get a 0, because negative result get me blocking for asking any more question, and on the other side I cannot delete any because I already accepted and upvoted nice answers, so I'm stuck and feel bad. thank you for your comprehension and I wish you a nice day ! – Ced Jun 18 '19 at 21:05

2 Answers2

1

You need to give a height to main class. As for example: height: 100vh; See:

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}


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

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
<div class="main">
    <div class="loader"></div>
</div>
Ced
  • 1,293
  • 5
  • 23
  • 34
Filipa Simão
  • 106
  • 1
  • 4
1

The .main element has the same height as the .loader element (i.e. the items are vertically centered, but there is no space to see it). You need to set the height of .main to the height you want to center in.

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}


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

  max-width: 50%;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
<div class="main">
    <div class="loader"></div>
</div>
Bastian Hofmann
  • 2,485
  • 19
  • 19
  • Thank you a lot for you answer ! :) Sorry to ask this but could you please upvote my question? Some people found funny to downvote it. – Ced Jun 18 '19 at 21:02