How to center 2 absolute divs

Question

I know that I can center an absolute div in front of every other element like this.

HTML

<div class='otherDiv1'></div>
<div class='otherDiv2'></div>
<div class='otherDiv3'></div>
<div class='otherDiv4'></div>

<div class='centerDiv'></div>

CSS

.centerDiv{
    position:absolute;
    transform:translate(-50%,-50%);
    top:50%;
    left:50%;
    z-indez:100; // Just a test number, just to ensure this div is in front of every other element
}

So in that way the div would be perfectely align to the center and responsive.

So my question is the following:

What is the best way to place 2 divs perfectly align like the previous one like and also be responsive

IN BIG SCREENS

IN SMALL SCREENS

If you have any idea how to do that please let me know (:

Possible duplicate of [How to center absolute element in div?](http://stackoverflow.com/questions/1776915/how-to-center-absolute-element-in-div) — miken32, Jun 06 '16 at 16:58

score 1 · Answer 1 · answered Mar 25 '16 at 04:47

1

Store the 2 divs inside 1 absolute positioned div that is centered.

answered Mar 25 '16 at 04:47

Kyle

403
2
10

It's not exactly a complex solution. – Kyle Mar 25 '16 at 05:03

score 1 · Answer 2 · answered Mar 25 '16 at 09:09

.centerDiv {
        display: inline-block;
        width: 80%;
        text-align: center;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
    }
    
    .centerDiv2 {
        border: 1px solid red;
        margin: 0 auto;
        width: 45%;
    }
    
    .left,.right {
 
        display: inline-block;
    }
    
    
    @media only screen and (max-width: 760px) {
        .left,
        .right {
            display: block;
        }
        .left {
            margin-bottom: 20px;
        }
    }

<!DOCTYPE html>
<html>

<head>
    <title>stack</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
</head>

<body>

        <div class='centerDiv'>
            <div class='centerDiv2 left'>abc</div>
            <div class='centerDiv2 right'>xyz</div>
        </div>


</body>

</html>

i think you need this type of design.if not please let me know.

score 0 · Answer 3 · answered Mar 25 '16 at 05:01

Set a center div with position and add two div incide it. Refer the below html

HTML

<div class='otherDiv1'></div>
<div class='otherDiv2'></div>
<div class='otherDiv3'></div>
<div class='otherDiv4'></div>

<div class='centerDiv'>
  <div class='centerDiv1'>
  </div>
  <div class='centerDiv2'>
  </div>

Domain · Answer 4 · 2016-03-25T05:20:11.187

Use the following code::

HTML:

<div class='otherDiv1'>abc</div>
<div class='otherDiv2'>abc</div>
<div class='otherDiv3'>abc</div>
<div class='otherDiv4'>abc</div>

<div class='centerDiv'>
  <div class='centerDiv2 left'>xyz</div>
  <div class='centerDiv2 right'>yzrr</div>
</div>

CSS:

.centerDiv{
display: inline-block;
width: 80%;
text-align: center;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}

.centerDiv2{
border: 1px solid red;
margin: 0 auto;
width: 40%;
}

.left{
float: left;
}

.right{
float: right;
}

How to center 2 absolute divs

4 Answers4