Can't align items vertically and horizontally

Question

so I'm trying to align a chevron arrow in the center of my screen using flexbox and bootstrap but whenever I try to use align-self: center; or align-content: center; it doesn't do anything, my arrow just align's itself horizontally and not vertically, Would you guys have any short way to achieve what I am trying to do using flexbox?

Here is my code:

html
{
width: 100%;
height: 100%;
}

body{
width: 100%;
height: 100%;
background-color: white;
}

#arrow
{
color: grey;
font-size: 30px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<i id="arrow" class="fas fa-chevron-down d-flex justify-content-center align-self-center"></i>

Have you tried to wrap it inside a div and then align the contents of that div to center? — Areg, Oct 21 '19 at 09:17
@Matt.Hamer5 I don't think so, I really want a simple way to do it. I don't want to wrap a single arrow in 5 containers — , Oct 21 '19 at 09:22

bkis · Accepted Answer · 2019-10-21T09:38:05.613

0

It's good you already tried a div container, but you also have to make sure the container has a certain size:

body {
  background-color: white;
}

#arrow-container {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#arrow {
  color: grey;
  font-size: 30px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div id="arrow-container">
  <i id="arrow" class="fas fa-chevron-down"></i>
</div>

EDIT: You don't even need the Bootstrap flex classes, then. By the way, you don't need position: absolute; on the container or use vw and vh as units. I just added it because you wanted to center on screen.

edited Oct 21 '19 at 09:38

answered Oct 21 '19 at 09:22

bkis

2,530
1
17
31

Super cool!, it works like a charm, thanks. I have another quick question, If I wanted to achieve the same thing with margins how would it go, would I have to do `margin-top: auto; margin-bottom: auto;`? – Oct 21 '19 at 09:28
Yes, exactly. Let me add an example. – bkis Oct 21 '19 at 09:29
I promised too much. You are right, you can generally use `margin: auto` for that, but I couldn't get it to work in your snippet. Who knows why... – bkis Oct 21 '19 at 09:37
Oh ok no worries, thank you for trying anyway. If I used margin: auto; which position should I choose to make it work? – Oct 21 '19 at 09:38
Well, the different ways of doing this are [numerous](https://stackoverflow.com/questions/79461/how-to-vertical-align-elements-in-a-div) – bkis Oct 21 '19 at 09:44

score -2 · Answer 2 · answered Oct 21 '19 at 09:28

-2

For some reason, % never worked for me. So I'm using this one

answered Oct 21 '19 at 09:28

ptheodosiou

390
3
17

Thanks for the response but what do you mean with the `%`? – Oct 21 '19 at 09:31
@Alex I wanted to say that when I use `html { height: 100% } body{ height:100% }` my code never worked correctly. There was something that was broken... – ptheodosiou Oct 21 '19 at 09:34
Oh ok, so what should I do with the html and body, should I remove the height and width properties? @ThPadelis – Oct 21 '19 at 09:36
If you go with my answer, then there is no need to use them. Otherwise, the [selected](https://stackoverflow.com/a/58483321/10165585) answer is what you need. @Alex – ptheodosiou Oct 21 '19 at 09:43
Ok, btw would you know why when I use both ways my webpage height is slightly bigger and a scrollbar appears at the right? @ThPadelis – Oct 21 '19 at 09:45
If you are using bootstrap, it should remove unwanted margins from the body. But if you have extra items in your body, like a `navbar` for example, then you need to calculate the diff of the body. For example let's say that you have a `navbar` with height of `90px`, then your body should have `height: calc(100vh - 90px)`. @Alex – ptheodosiou Oct 21 '19 at 09:50
Oh ok, thats exactly what I have, thank you I'll keep it in mind :D – Oct 21 '19 at 09:53

Can't align items vertically and horizontally

2 Answers2