-1

I have just started of with HTML so this is a new realm for me. I am trying to get a rectangular container in the middle of the pafe,Overlaying two other containers. This is the script i wrote and this how i am trying to make it look like 

<style>
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height:800px;
 }
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
img { 
     width:100%; 
     height:100%; 
            } 
.footer {
clear:both;
font-family: 'McLaren', cursive;
background-color:black;
text-align:center;
height:50px;
padding-top: 10px;
box-sizing: border-box;
}

</style>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<h2>Two Equal Columns</h2>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <img src="4.jpg"alt="Snow">
  </div>
  <div class="column" style="background-color:#bbb;">
    <img src="5.jpg"alt="Snow">
    
  </div>
<div class="footer">
 &copy; These are random text
</div>
</div>

</body>
</html>

This is what i am trying to get it to look like

Jake
  • 23
  • 4
  • Where is the div you want to center? – Paulie_D Nov 13 '19 at 15:35
  • 1
    Duplicate - https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically – Paulie_D Nov 13 '19 at 15:37
  • 1
    Possible duplicate of [How to vertically center a div for all browsers?](https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) – Sven 31415 Nov 13 '19 at 15:48

4 Answers4

0

You can try using absolute position.

Example : if you’re div is 50% of the screen width and height etc. 

 .div{
 position: absolute;
 top: 25%;
 left: 25%;
 }
Georg
  • 67
  • 6
0

<style>
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.row{
 display: flex;
 justify-content: center;
 align-items: center;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
img { 
     width:100%; 
     height:100%; 
            } 
.footer {
position: fixed;
font-family: 'McLaren', cursive;
background-color: black;
text-align: center;
height: 50px;
padding-top: 10px;
box-sizing: border-box;
width: 100%;
bottom: 0;
}

</style>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<h2>Two Equal Columns</h2>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <img src="4.jpg"alt="Snow">
  </div>
  <div class="column" style="background-color:#bbb;">
    <img src="5.jpg"alt="Snow">
    
  </div>
</div>
<div class="footer">
 &copy; These are random text
</div>

</body>
</html>
Imen Krichen
  • 51
  • 4
0

Add position:relative to your row Class. This way the orange block can be positioned in the middle of the two .column divs

And then add this css class to the div you want to center 

.middleScreen {
    position:absolute;
    top: 50%;
    left: 50%;
    width : 100px ;
    height : 100px ;
    background-color : orange ; 
    margin-top: -50px; /* = - 1/2 of the height*/
    margin-left: -50px; /* = - 1/2 of the width*/
}


* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height:800px;
 }
 
.row {
  position :relative; 
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
img { 
     width:100%; 
     height:100%; 
} 
.footer {
     clear:both;
     font-family: 'McLaren', cursive;
     background-color:black;
     text-align:center;
     height:50px;
     padding-top: 10px;
     box-sizing: border-box;
}
.middleScreen {
     position:absolute;
     top: 50%;
     left: 50%;
  width : 100px ;
  height : 100px ;
  background-color : orange ; 
     margin-top: -50px; /* = - 1/2 of the height*/
     margin-left: -50px; /* = - 1/2 of the width*/
}
<h2>Two Equal Columns</h2>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <img src="4.jpg"alt="Snow">
  </div>
  <div class="column" style="background-color:#bbb;">
    <img src="5.jpg"alt="Snow">
    
  </div>
<div class="footer">
 &copy; These are random text
</div>

<div class="middleScreen">
aaaaaaaaaaa
</div>
</div>
Mehdi Ayari
  • 478
  • 5
  • 13
0

Hope this code will help you:

body
{
  padding:0;
  margin:0;
}

.row
        {
            width: 100%;
            height: 100vh;
            display: flex;
            position: relative;
        }

        .column
        {
            width: 50%;
            height: 100%;
        }

        .column img
        {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .yellow
        {
            background-color: #ff0;
        }

        .red
        {
            background-color: #f00;
        }

        .overlay
        {
            width: 30%;
            height: 30%;
            box-sizing: border-box;
            padding: 2rem;
            background-color: #00f;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
<section class="row">
    <div class="column yellow">
        <img src="" alt="">
    </div>

    <div class="column red">
        <img src="" alt="">
    </div>

    <div class="overlay">
        <h1>Hello word!</h1>
    </div>
</section>
Milad
  • 15
  • 4