Vertical alignment of a DIV inside another DIV

Question

I'm trying for some days to vertically align the .sl_container.
I have tried vertical-align: middle, but that doesn't work.

If i specify a height and width for the .slideshow, then using top: 50%; and transform: translateY(-50%);, that works. See here.
The problem is that if i remove the height and width for the slider to take up the available space and adapt, then the this will make the inner div appear moved upwards. See here.

display: table-cell; was not an option as it would have the arrows at the sides of the full width of the parent div instead of on the image.

I've tried flex before, and it gets vertically aligned, but if the parent DIV width is bigger than the child DIV, for some reason it goes to

As I said, I’ve tried multiple ways and there is not a single one that gets it done well without breaking the arrow positions.

What I’ve done until now: JSFiddle
The before mentioned settings are commented out in the CSS section.

Any insight to this would be helpful as to a way or how to get it aligned without breaking the whole slide and arrows.

FYI: There is a bleeding effect from the DIV's or images expanding like 1-2px to the bottom, reason why I have each DIV coloured to see if I can fix it. I'm sure it something silly and if you know what it is, please say so. It’s not important so I don’t really care much. xD

You can use `vertical-align` property only for `display: inline` elements — JSEvgeny, Nov 03 '17 at 12:37
Possible duplicate of [How to horizontally center a
in another
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div) — Mukul Kant, Nov 03 '17 at 12:38
Possible duplicate of [Vertical align div inside another div without flex](https://stackoverflow.com/questions/46902241/vertical-align-div-inside-another-div-without-flex) A simple search of SO would have found you this and a host of others. — Rob, Nov 03 '17 at 12:44
One more, while we're at it: Possible duplicate of [How do I vertically center text with CSS?](https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css) — Daniel Beck, Nov 03 '17 at 13:21
I completely forgot to indicate that i did try flex (even that i never used it before), but it did not work for me in IE. Using IE11. — DanCoder, Nov 03 '17 at 14:24

Scott Brown · Accepted Answer · 2017-11-03T13:13:43.063

5

Add this to your slideshow element, using flexbox. Flex Needs prefixing for IE11 (caniuse)

.slideshow {
    display: flex;
    align-items: center;
}

Edit: I enabled the commented height and width styles in your jsFiddle, but this method will vertically align slideshow child regardless of width and height.

edited Nov 03 '17 at 13:13

answered Nov 03 '17 at 12:41

Scott Brown

334
1
2
13

+ height: 100vh; – VXp Nov 03 '17 at 12:42
Tried it, but forgot to mention it before. Doesn't work with IE, unless i'm missing something for one of the images thats smaller that the indicated width. See here: [JSFiddle](http://jsfiddle.net/bL3ysgnx/47/) And I cant add 100vh, as it has to be able to work in a popup too, a popup that fits to the vh and wh thats indicated in a page. The slide needs to adapt to its parent DIV automaticly if needed. This i have figured out, i just need to make sure the center is center for the iner DIV of the slide. Flex did get that done for IE, unless i missed a setting. I've never used flex before. – DanCoder Nov 03 '17 at 14:30
You'll need to use flex prefixes with IE see [here](http://shouldiprefix.com/#flexbox). In regards to the slide adapting to its parent, you'll just need to set 100% width and heights to the slide. – Scott Brown Nov 03 '17 at 14:36
OK, it works. It wasn't the prefix or any of the sort, with flex it works but i have to remove the little trick to center divs `margin: 0 auto`. As Flex already does it, so its not needed. Now i know why Flex wasn't working in the first place. Thanks for the help provided. Latest working: [See here](http://jsfiddle.net/MrHeadSlash/bL3ysgnx/50/) – DanCoder Nov 03 '17 at 15:04

score 3 · Answer 2 · edited Nov 07 '18 at 05:23

3

Try using flexbox, it's the most elegant solution for vertical alignment

E.g.

<div class='parentDiv'>
  <div class='childDiv'>
  </div>
</div>

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

Take a look -> here

edited Nov 07 '18 at 05:23

user5854648

1,029
2
11
36

answered Nov 03 '17 at 12:42

krmzv

387
3
14

Tried it, but forgot to mention it before. Doesn't work with IE, unless i'm missing something for one of the images thats smaller that the indicated width.
See here: [JSFiddle](http://jsfiddle.net/bL3ysgnx/47/) – DanCoder Nov 03 '17 at 14:27

Vertical alignment of a DIV inside another DIV

2 Answers2