0

I have a html code:

#table{
    margin: auto;
    width: 50%;
    padding: 10px;
    border: 2px solid black;
    overflow: auto;
    text-align: center;
}

#qrtr_details{
    margin: auto;
    width: 80%;
    padding: 5px;
    overflow: auto;
    text-align: center;
}
<body>
    <div>
        <div id="table">
            <table id="qrtr_details" border="1">
                <tr style="padding: 5px;">
                    <td><b>Employee No/Name:</b></td>
                    <td><input type="text" size="30" id="emp" maxlength="11" style="text-align: center;"></td>
                </tr>
            </table>
        </div>
    </div>
</body>

I want to re-position the div #table to the center of the screen.

But the div is centered horizontally, and not vertically. How do I fix this?

  • The faster way to set **height & line-height** as the same value, such as `#table{ height: 500px ; line-height: 500px }` – Watson Chen Jul 05 '22 at 06:57
  • you can use flexbox properties to align a div to center you can refer here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – U-33 Jul 05 '22 at 07:12

0 Answers0