SOLVED: Using absolute positioning to center a div class in the middle

javascriptcoding5678 · July 21, 2021, 9:16am

I’m having trouble centering this div class in the middle.

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

I can’t figure out how to position it in the middle.

How it works is, you click on the play image and it opens up.

The rectangle of the same width and height, should be in the middle.

.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;
}

What did I do wrong?

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

body {
  background: #353198;
}

.curtain {
  position: relative;
  width: 100%;
  height: 100%;
}

.curtain.slide {
  height: auto;
  min-height: 100%;
  overflow: hidden;
}

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all ease 10s;

  /*background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;*/
  overflow: hidden;
}

.panel-left {
  left: 0;
  /*background-color: rgb(91, 96, 106);*/
}

.panel-right {
  right: 0;
  /*background-color: rgb(229, 211, 211);*/
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-image: url("https://picsum.photos/1920/1080");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.panel-right::before {
  left: -100%;
}

.curtain.slide .panel-left {
  transform: translateX(-100%);
}

.curtain.slide .panel-right {
  transform: translateX(100%);
}

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

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

.jacketa {
  position: absolute;
  top: 40px;
  width: 180px;
  height: 180px;
  cursor: pointer;
  border-radius: 50%;
  background: #130e85;
  border: 3px solid #f91f6e;
  box-sizing: border-box;
  box-shadow: 0 0 20px 2px #f9066bf7;
  display: block !important;
}

.j1 .jacketa {
  left: 30px;
}

.j2 .jacketa {
  right: 30px;
}

.jacketa .coversvg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
}

.jacketa .coversvg {
  width: 70px;
  height: 75.4px;
  fill: none;
  stroke-width: 4px;
  stroke-miterlimit: 10;
}

.jacketa .coversvg .back {
  stroke: #000;
  opacity: 0.15;
}

.jacketa .coversvg .front {
  stroke: #08f9ff;
  stroke-dasharray: 150;
  stroke-dashoffset: 1500;
  animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
}

@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes flicker-1 {

  0%,
  100% {
    opacity: 1;
  }

  41.99% {
    opacity: 1;
  }

  42% {
    opacity: 0;
  }

  43% {
    opacity: 0;
  }

  43.01% {
    opacity: 1;
  }

  47.99% {
    opacity: 1;
  }

  48% {
    opacity: 0;
  }

  49% {
    opacity: 0;
  }

  49.01% {
    opacity: 1;
  }
}

.split-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 240px;
  height: 260px;
  margin: auto;
  border-radius: 50%;
  transition: 10s ease;
}

.j1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: 10s ease;
}

.j2 {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: 10s ease;
}

.curtain.slide .j1 {
  left: -500%;
}

.curtain.slide .j2 {
  left: 500%;
}

.video-wrapper {
  min-width: 40%;
  max-width: 640px;
  margin: auto;
}

.ratio-keeper {
  position: relative;
  padding-top: 56.25%;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.container {
  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;
}

.hide {
  display: none;
}


<div class="curtain">
  <div class="outer">
    <div class="tcell">

      <div class="container hide ">
        <div class="video-wrapper">
          <div class="ratio-keeper">

            <div class="wrap">
              <div class="video video-frame"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="panel-left"> </div>
      <div class="panel-right"> </div>

      <div class="split-wrap">
        <div class="j1">
          <div class="jacketa" title="[ Enjoy The Music ]">
            <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
              <title>[ Enjoy The Music ]</title>
              <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
              <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
            </svg>
          </div>
        </div>
        <div class="j2">
          <div class="jacketa" title="[ Enjoy The Music ]">
            <svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
              <title>[ Enjoy The Music ]</title>
              <path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
              <path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
            </svg>
          </div>


        </div>
      </div>

    </div>
  </div>
</div>

LeKoels27 · July 21, 2021, 9:27am

Im relatively new to web dev, however have you tried using 50% on top and left properties and transform: translate by -50%.

javascriptcoding5678 · July 21, 2021, 9:40am

I don’t believe that way worked for me.

bryan123bg · July 21, 2021, 9:54am

Hello @javascriptcoding5678,

I found that this website helped me center elements with position: absolute. Maybe try to use that method and I hope it helps.

-Bryan

Aerrol · July 21, 2021, 10:00am

It seems that the problem is not with div.wrap but everything before it. There are multiple divs with position absolute and ratio keeper has a padding top that moves the effective top of that container down instead of around it.

Start with adding display: grid; place-items: center; onto the style of div.container.
If that works with you we can start working from there.

lasjorg · July 21, 2021, 4:57pm

You need a fixed height on .container. You can use height: 360px as that seems to be the aspect ratio you are going for.

But I wouldn’t be centering it like that. The code you posted is kind of out of context and without any actual content just a bunch of containers. But here is an example with an alternate approach anyway.

https://jsfiddle.net/f7g6pjbk/

javascriptcoding5678 · July 22, 2021, 12:20am

That still doesn’t fix it though, still not in the middle.

https://jsfiddle.net/fgayos9x/


.container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 360px;

}

.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;
}

lasjorg · July 22, 2021, 1:32am

It is in the middle until you shrink it down. It has to do with the way you are maintaining the aspect ratio.

Here it is with the way I did the aspect ratio in the other fiddle but with the original centering technique. I removed the ratio-keeper div.

https://jsfiddle.net/y5gL7t6d/

I’m not so sure you understand this centering technique which makes it harder for you to use. It’s a pretty odd technique and not one used that often. I’m not sure I would suggest using it for this.

Edit: You also seem to have an abundance of containers in your project. You should really make sure you are not unnecessarily using containers and nesting elements deeply. Your layout is just going to become unmanageable if you are not more careful about this.

javascriptcoding5678 · July 24, 2021, 1:13am

This worked
https://jsfiddle.net/6px7jokq/5/

.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;
}

system · January 22, 2022, 1:13pm

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

Topic		Replies	Views
How can i center a certain container at the very middle of screen? HTML-CSS	2	596	January 16, 2021
How to Center a Div Within a Div Without Using Absolute Positioning HTML-CSS	22	10200	March 9, 2021
How do I center my group of div's HTML-CSS	2	219	March 27, 2023
The image in the div is supposed to be at the center but is aligned to the right of the parent div element. How can I bring to the middle?	3	584	January 17, 2021
Placing text in the middle of the circle HTML-CSS	4	1908	January 2, 2022

SOLVED: Using absolute positioning to center a div class in the middle

Related topics