WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to Vertically Center a DIV Element Using CSS

Topic: HTML / CSSPrev|Next

Answer: Use the CSS flex and align-items Properties

You can simply use the CSS flex property in combination with the align-items property to vertically center a <div> element on the page in all major modern browsers.

Let's try out an example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Align a Div Vertically Center</title>
<style>
    html, body{
        margin: 0;
        padding: 0;
    }
    .wrapper{
        display: flex;
        height: 100vh;
        align-items: center; /* vertically center div */
    }
    .box{
        width: 50%;  /* set width of div */
        padding: 20px;        
        margin: 0 auto; /* horizontally center div */
        background: #ccc;
        font-size: 2em;
    }
</style>
</head>
<body>
    <div class="wrapper">
        <div class="box">Vertically Centered Div</div>
    </div>
</body>
</html>

Related FAQ

Here are some more FAQ related to this topic:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties