Center Div Vertically And Horizontally Responsive
Live Preview Compare Hosting

Center Div Vertically And Horizontally Responsive

How to Center div vertically and horizontally in responsive with CSS. We can center any div, image, text, and all HTML tags or elements. This CSS trick is the most important and useful in web development and design.

Vertically and horizontally align center div with flexbox. Here not require Bootstrap or JavaScript code to do this task. It will be done with display: flex, justify-content: center, and align-items: center CSS property.

See More

Add HTML

<!DOCTYPE html>
<html lang="en">
<head>
  	<title>Center Div Vertically And Horizontally Responsive</title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

    <div class="outerBox">
        <div class="innerBox">Inner Box</div>
    </div>

</body>
</html>

Add CSS

/*-- Outer Box CSS --*/
.outerBox {
    height: 60vh;
    background: #f1f1f1;
    padding: 0 20px;
    margin: 100px 50px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 6px 0px #a5a5a5;
    border-radius: 5px;
}

/*-- Inner Box CSS --*/
.innerBox {
    background: #ffffff;
    box-shadow: 0px 0px 6px 0px #a5a5a5;
    border-radius: 5px;
    padding: 30px;
    font-size: 20px;
}

Leave a Comment