CODEWITHSUNDEEP
htmlcssalignment
Lester Vargas
Lester Vargas

Reputation: 368

How to center 2 absolute divs

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.

enter image description here

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

enter image description here

IN SMALL SCREENS

enter image description here

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

Upvotes: 2

Views: 900

Answers (4)

Batman
Batman

Reputation: 480

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

Upvotes: 1

Domain
Domain

Reputation: 11808

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

Upvotes: 0

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10177

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>

Upvotes: 0

Kyle
Kyle

Reputation: 403

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

Upvotes: 1

Related Questions