The code contains: 1. DIV with fixed width and height is centered horizontally and vertically. 2. 4 is not fixed in the table layout. 5 is not fixed in the display:table layout. Not fixed width and height, cSS3 implementation \

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .block:before {
            content: ' ';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div style="position:relative; background: #00a0e9; width: 500px; height: 200px;">
    <div style="position: absolute; background: #00cc66; width: 200px; height: 100px; left: 50%; top: 50%; margin-left: -100px; margin-top: -50px;"></div>
</div>
<div class="block" style="position:relative; text-align:center; background: #4b7ae9; width: 500px; height: 200px;">
    <span>Xu Tongbao</span>
</div>
<table style="width: 500px; height:200px; background: #609a54">
    <tr>
        <td style="text-align: center; vertical-align: middle;">Xu Tongbao</td>
    </tr>
</table>
<div style="display: table; width: 500px; height:200px; background: #8e8e9a;">
    <div style="display: table-cell; text-align: center; vertical-align: middle;">Xu Tongbao</div>
</div>
<div style="justify-content: center; align-items: center; display:flex; background:#da4939; width: 500px; height:200px;">Xu Tongbao</div>
</body>
</html>
Copy the code

\

\

\