0

So I have a container div that has a height of 500px and a width of 500px.

Now, I have 2 divs that I want to insert into that container div. Let's name the 'A' and 'B'.

I want 'A' to be vertically centered and I want 'B' to be at the bottom of the container div.

I'll draw it out:

enter image description here

My solution was to use flex box and justify-content-between and to use 3 divs. The first div would be an empty div, and div 'A' and div 'B' would just follow.

I don't like the idea of using an empty div and I don't want to use position absolute, so if anyone could please help me find another solution, that would be great!

enter image description here

jayweezy
  • 81
  • 8
  • Hello, I made a quick example for you [here](https://jsfiddle.net/n5skrd7v/8/) using flexbox. Hope it helps you! :) – Abdulrahman Ali Oct 05 '22 at 17:44
  • 1
    @AbdulrahmanAli Your A and B are not centered horizontally (they are offset just a little) – dgrogan Oct 05 '22 at 17:52
  • Thanks @dgrogan, I just noticed the issue and the little offset. An easy fix would be to add `transform: translateX(-100%)` to the second div `.b` which would center them under each other perfectly. I updated the code [here](https://jsfiddle.net/rhgwnmuL/56/) – Abdulrahman Ali Oct 05 '22 at 18:27

1 Answers1

-2

If they are both within a parent div, you could use absolute positioning to set a top of 50%, display: flex, flex-direction: column and then justify content space between all on the parent.

ynn3b
  • 1