Using absolute positioning to center a div class in the middle

HTML & CSS
1

It keeps staying centered to the top, and not the middle.

https://jsfiddle.net/g54q2rb3/

.wrap {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid red;
  box-sizing: border-box;
}

2

Add display:flex to .container.

3

Doing that causes the video to stay tiny.

Am I supposed to adjust something else?

https://jsfiddle.net/29fc3b18/4/

.container {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}

.wrap {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid red;
  box-sizing: border-box;
}

894Ă—473 72.4 KB

4

You probably need to add flex:1 0 0 to the video wrapper.

.video-wrapper {
    min-width: 40%;
    max-width: 640px;
    margin: auto;
    flex: 1 0 0;
}
1 Like
5

How come it needed flex added to it and couldn’t work with just absolute?

6

.wrap has only the height of its relative parent which has no height so there is no middle for it. Video wrapper has a full height but ratio-keeper sits at the top of that full height so any children of ratio-keeper have only the height that they can get from ratio keeper. The flex solution was much easier to make work.

When testing give your elements various background colours and then its obvious why things are where they are.

1 Like
7

What would have worked if there was no flex?

8

Probably need to change these two rules as follows:

.video-wrapper {
    min-width: 40%;
    max-width: 640px;
    margin: auto;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.ratio-keeper {
    position: absolute;
    padding-top: 56.25%;
    width: 100%;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 0;
}
1 Like
9

How would I get absolute to position a group of buttons in the middle.

How come it’s not working?
https://jsfiddle.net/q6tkmnrw/3/

Relative is at the top, then absolute is below that, shouldn’t the box be centered?

.container {
  position: relative;
  width: 582px;
  height: 717px;
  background: red;
}

.playButton {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  width: 150px;
  height: 195px;
10

I got it
https://jsfiddle.net/d2t71agz/5/

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

.wrap {
  position: relative;
  width: 582px;
  height: 717px;
  background: red;
}

.playButton {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 150px;
  height: 195px;
}

  <div class="outer">
    <div class="tcell">
      <div class="wrap">
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.