如何实现输入框与按钮在屏幕底部居中且避免堆叠布局？

你的问题核心是没有从整体层面将表单容器定位到屏幕底部，当前的flex布局仅作用于按钮的小容器，无法控制整个页面的垂直分布。以下是具体修复方案：

关键修改点 #

• 给body设置占满视口高度的布局，通过flex属性将表单区域推至屏幕底部
• 统一设置输入框和按钮的居中对齐规则
• 清除浏览器默认样式带来的布局干扰

修改后的完整代码 #

<?php
    if (isset($_POST["submit_address"]))
    {
        $address = $_POST["address"];
        $address = str_replace(" ", "+", $address);
        ?>
 
        <iframe style="padding:5px; margin:5px;" width="100%" height="600px" src="https://maps.google.com/maps?q=<?php echo $address; ?>&output=embed"></iframe>
 
        <?php
    }

  if (isset($_POST["submit_coordinates"]))
    {
        $latitude = $_POST["latitude"];
        $longitude = $_POST["longitude"];
        ?>
 
        <iframe style="padding:5px; margin:5px;" width="100%" height="600px" src="https://maps.google.com/maps?q=<?php echo $latitude; ?>,<?php echo $longitude; ?>&output=embed"></iframe>
 
        <?php
    }
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Livestock Dashboard</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        button{
            width: 7%;
            height: 45px;
            background: #2364d2;
            border: none;
            border-radius: 5px;
            font-size: 22px;
            font-weight: 500;
            font-family: "Source Sans Pro", sans-serif;
            box-shadow: 3px 10px 20px 0px rgba(35, 100, 210, 0.3);
            color: #fff;
            margin-top: 20px;
            cursor: pointer;
        }

        input{
            text-align: center;
            width: 50%;
            height: 40px;
            border-radius: 5px;
            box-shadow: none;
            border: 1px solid #ced6e0;
            transition: all 0.3s ease-in-out;
            font-size: 18px;
            padding: 5px 15px;
            background: none;
            color: #1a3b5d;
            font-family: "Source Sans Pro", sans-serif;
        }

        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-image: url('bull.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
        }

        .form-wrapper {
            margin-top: auto;
            padding-bottom: 20px;
            text-align: center;
            width: 100%;
        }

        .form-wrapper form {
            margin-bottom: 25px;
        }
    </style>
</head>
<body>
    <div class="form-wrapper">
        <form method="POST">
            <input type="text" name="address" placeholder="Enter address">
            <div style="display:flex; justify-content:center;">
                <button type="submit" name="submit_address">Submit</button>
            </div>
        </form>
        <form method="POST">
            <input type="text" name="latitude" placeholder="Enter latitude"><br><br>
            <input type="text" name="longitude" placeholder="Enter longitude">
            <div style="display:flex; justify-content:center;">
                <button type="submit" name="submit_coordinates">Submit</button>
            </div>
        </form>
    </div>
</body>
</html>

代码说明 #

1. 全局样式重置：* {margin:0; padding:0; box-sizing:border-box;} 消除浏览器默认内外边距，避免布局偏移
2. body核心布局：min-height:100vh 确保页面占满屏幕高度，display:flex; flex-direction:column 让子元素垂直排列，margin-top:auto 将表单容器推至屏幕底部
3. 表单容器：.form-wrapper 设置text-align:center让输入框居中，padding-bottom保持底部间距
4. 按钮对齐：将按钮的flex容器justify-content改为center，确保按钮和输入框水平对齐

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