如何让两个网页元素并排且整体居中显示？

核心方案：使用Flex布局 #

Flex是现代前端布局的标准方案，既能轻松实现子元素并排，又能一键搞定整体居中，完全适配窗口尺寸变化，比你之前尝试的float、固定margin靠谱得多。

修改步骤及代码 #

1. 完整HTML（无需调整结构，仅补充viewport适配移动端）

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body {
                margin: 0;
                min-height: 100vh; /* 让body占满整个屏幕高度 */
                display: flex;
                justify-content: center; /* 水平居中容器 */
                align-items: center; /* 垂直居中容器 */
                background-color: #f5f5f5; /* 可选，区分区块与背景 */
            }

            .container {
                display: flex; /* 让内部两个区块横向排列 */
                gap: 0; /* 区块间无间距，紧密相邻；如需间距可改为10px/2vh等值 */
            }

            .landingText, .menu {
                padding: 10vh;
                border: 0.2vh outset lightgrey;
                background-color: white;
                width: 50vh;
                height: 50vh;
                font-size: 2.3vh;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="landingText">
                <h2>something something title</h2>
                <h4>yada yada not important imagine a big block of text here</h4>
            </div>
            <div class="menu">
                <p>again unimportant, will be a bunch of buttons</p>
            </div>
        </div>
    </body>
</html>

2. 关键CSS解释

• body设置：清除默认margin，用min-height:100vh让页面占满屏幕，再通过display:flex + justify-content:center + align-items:center实现容器的水平+垂直居中。
• container设置：display:flex让内部两个区块横向并排，gap:0确保它们紧密相邻（如需间距可直接调整数值）。
• 子元素样式：移除原来的float:left和固定margin-left，统一复用样式代码，减少冗余。

为什么这比你之前的方法好 #

• 完全适配窗口变化：无论窗口怎么缩放，区块都会保持居中并排，不会出现偏移。
• 代码简洁易维护：无需计算复杂的margin值，Flex布局的属性语义化强，新手也能快速理解。
• 避免float的坑：不用处理清除浮动、元素塌陷等问题，布局逻辑更清晰。

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