Centering a div class in the middle using absolute positioning [duplicate] - html

Question

This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
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.
https://jsfiddle.net/v3rn4tf0/
.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;
}
(function iife() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const curtain = document.querySelector(".curtain");
curtain.classList.add("slide");
const thewrap = curtain.parentElement.querySelector(".container");
show(thewrap);
}
const cover = document.querySelectorAll('.jacketa');
cover.forEach(function(el) {
el.addEventListener('click', coverClickHandler)
});
}());
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>

Answer 1

You can try this method:
html,
body {
height: 100%;
}
.centered-item {
/* Positioning */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 300px;
/* Styling */
padding: 20px;
font-family: "Open Sans", Arial, sans-serif;
color: #FFFFFF;
background: #1f2227;
border-radius: 3px;
}
Demo:
https://jsfiddle.net/caneroncel/f5nuqkmv/1/