In this tutorial, we will learn How to set vertical align middle div by CSS in HTML



Example 1

<html>
    <head>
    <title></title>
    <style type="text/css">
    body {
        padding: 50px;
    }
    .outter {
        width: 500px;background:green;color:white;height: 150px;border:1px solid red;display: table;
    }
    .main-content1 {
        display: table-cell; vertical-align: middle;
    }
    .sub-content1 {
        border:1px solid green; width: 50px; height: 50px; margin: auto;
    }
    </style>
    </head>
<body>
    <div class="outter">
        <div class="main-content1">
            <div class="sub-content1">
                <p>Table-cell</p>
            </div>
        </div>
    </div>
</body>
</html>

May this example help you