Skip to main content

How to align center div in div in html ?

align center div in div in html




<html>
<head>
<style>
.outer{
width: 100%;
height: 100vh;
background:red;
}
.container{
width: 35%;
height: 60vh;
background:blue;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

</style>
</head>
<body>
<div class="outer">
<div class="container">
</div>
</div>

</body>
</html>



OR





<html>
<head>
<style>

.outer{
width: 100%;
    height: 100vh;
    background: red;
    display: flex;
    justify-content: center;
    align-items: center;

}
.container{
width: 35%;
height: 60vh;
background:blue;
}

</style>
</head>
<body>
<div class="outer">
<div class="container">
</div>
</div>

</body>
</html>

Comments

Post a Comment

Popular posts from this blog

How to check date format in PHP?

Check date format in PHP function isCorrectDateFromat($date){     if(!empty($date)){         $dateString = $date; // Replace this with your date string         $format = "Y-m-d"; // Replace this with your expected date format         $dateTime = DateTime::createFromFormat($format, $dateString);         if ($dateTime === false) { /*             echo "The date is not in the correct format."; */         } else {             $errors = DateTime::getLastErrors();             if (empty($errors)) { /*                 echo "The date is in the correct format."; */                 return true;             } else { /*                 echo "...
Post a Comment
Read more