如何不使用<center>标签实现整个body内容的水平居中？

这个问题和常见的“水平居中单个元素”需求不同，目标是让body内的所有内容整体水平居中。以下是几种可在<style>的body {}中添加（或配合其他元素）的样式方案：

当前代码示例 #

<!DOCTYPE html>
<html><head>
    <title>center</title>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <style>
        body {
            background-color: #FFFFFF ;
            font-family: Helvetica, sans-serif ;
            color: #000000 ;
            font-size: large
        }
    </style>
</head>
<body>
    <table style="border: none; padding: 0">
        <tr><td><svg width="48" height="48">
            <rect width="48" height="48" style="fill:#EA9000"/></svg></td>
            <td><h2>&nbsp;center.html</h2></td>
        </tr>
    </table>
    <p>vorpal text</p>
    <img src="http://clipart-library.com/data_images/383516.jpg" alt="eek">
    <form action=""><input type="submit" value="Submit"></form>
</body>
</html>

当前运行效果：

解决方案 #

方法一：使用max-width + margin: 0 auto（最常用） #

给body设置最大宽度并让左右外边距自动分配，即可实现内容整体水平居中，同时适配不同屏幕宽度：

body {
    background-color: #FFFFFF ;
    font-family: Helvetica, sans-serif ;
    color: #000000 ;
    font-size: large;
    max-width: 800px; /* 可根据需求调整宽度 */
    margin: 0 auto; /* 左右外边距自动，实现水平居中 */
    padding: 0 1rem; /* 可选，避免窄屏内容贴边 */
}

方法二：使用Flexbox布局 #

通过给根元素html设置Flex布局，间接让body内容居中：

html {
    display: flex;
    justify-content: center;
    min-height: 100vh; /* 确保占满视口高度 */
}
body {
    background-color: #FFFFFF ;
    font-family: Helvetica, sans-serif ;
    color: #000000 ;
    font-size: large;
    width: 100%;
    max-width: 800px;
    padding: 0 1rem;
}

修改后的完整代码示例 #

<!DOCTYPE html>
<html><head>
    <title>center</title>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <style>
        body {
            background-color: #FFFFFF ;
            font-family: Helvetica, sans-serif ;
            color: #000000 ;
            font-size: large;
            max-width: 800px;
            margin: 0 auto;
            padding: 0 1rem;
        }
    </style>
</head>
<body>
    <table style="border: none; padding: 0">
        <tr><td><svg width="48" height="48">
            <rect width="48" height="48" style="fill:#EA9000"/></svg></td>
            <td><h2>&nbsp;center.html</h2></td>
        </tr>
    </table>
    <p>vorpal text</p>
    <img src="http://clipart-library.com/data_images/383516.jpg" alt="eek">
    <form action=""><input type="submit" value="Submit"></form>
</body>
</html>

修改后，body内的所有内容会整体水平居中显示。

内容的提问来源于stack exchange，提问作者Hermitian