Vertical and horizontal center alignment using flex box

Question

I have two divs with images inside that I am trying to center horizontally and vertically within the page. They remain pinned to the left of each div. How do I resolve this? My goal is to create two columns, left approx 30% of total width containing voab.png, right remaining 70% of total width containing 3 icons vertically stacked.

body {
  background-image: url("_images/back.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100vw;
}

.icons img {
  opacity: 0.6;
}

div.voab {
  min-height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

div.left {
  width: 30%;
  height: 100%;
}

div.icons {
  width: 70%;
  height: 100%;
}

<div class="voab">
  <div class="left"> <img src="_images/voab.png" width="186" height="178"></div>
  <div class="icons"> <img src="_images/insta.png" alt="insta" width="65" height="65" style="padding-bottom: 40px;"> <br>
    <img src="_images/opensea.png" width="65" height="65" style="padding-bottom: 40px;"> <br>
    <img src="_images/twit.png" alt="insta" width="65"> </div>
</div>

have not been able to find one. please reference. thanks – vincent Sep 17 '21 at 10:10 — vincent, Sep 17 '21 at 10:10

score 0 · Answer 1 · answered Sep 17 '21 at 09:16

The percentage values you've added to left and icons make the two divs expand to fill the full width of the container. Just remove the width attributes and let their width be determined automatically:

body {
  background-image: url("_images/back.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100vw;
}

.icons img {
  opacity: 0.6;
}

div.voab {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

div.left {
  height: 100%;
}

div.icons {
  height: 100%;
}

<div class="voab">
  <div class="left"> 
    <img src="_images/voab.png" width="186" height="178">
  </div>
  <div class="icons">
    <img src="_images/insta.png" alt="insta" width="65" height="65" style="padding-bottom: 40px;"> <br>
    <img src="_images/opensea.png" width="65" height="65" style="padding-bottom: 40px;"> <br>
    <img src="_images/twit.png" alt="insta" width="65">
  </div>
</div>

Thank you. I forgot to mention that I am trying to create an approx 30/70 spacing (left image centred in the left 30% of the screen; right image centred in the right 70% of the screen). — vincent, Sep 17 '21 at 09:20
When you say right image, do you mean the contents of your icons div? — dave, Sep 17 '21 at 09:31
Yes. Two containers, left with the voab.png, right with the vertically stacked 3 icons. — vincent, Sep 17 '21 at 10:09

score 0 · Answer 2 · answered Sep 17 '21 at 10:28

Try this:

body {
  background-image: url("_images/back.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100vw;
}

.icons img {
  opacity: 0.6;
  align-self: center;
}

.left img {
  align-self: center;
}

div.voab {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
}

div.left {
  display: flex;
  flex-direction: column;
  flex: 0 0 30%;
  height: 100%;
}

div.icons {
  display: flex;
  flex-direction: column;
  align-self: end;
  flex: 0 0 70%;
  height: 100%;
}

<div class="voab">
  <div class="left">
    <img src="_images/voab.png" width="186" height="178">
  </div>
  <div class="icons">
    <img src="_images/insta.png" alt="insta" width="65" height="65" style="padding-bottom: 40px;"> 
    <img src="_images/opensea.png" width="65" height="65" style="padding-bottom: 40px;"> 
    <img src="_images/twit.png" alt="insta" width="65">
  </div>
</div>

Vertical and horizontal center alignment using flex box

2 Answers2