让表单居屏幕中央

左手的ㄟ右手 2024-03-22 01:01 63阅读 0赞

**目录**

让表单居屏幕中央

屏幕中央 的css样式：

表单代码：

效果：

有背景

效果：

--------------------

## 让表单居屏幕中央 ##

>  *  这里，我们给 `#myDiv` 元素添加了 `position: absolute` 属性，并把 `top` 和 `left` 值都设置为 50%，让元素在屏幕的中央水平和垂直方向上各占一半位置。然后，使用 `transform: translate(-50%, -50%)` 来居中 `#myDiv` 的内容。
>  *  需要注意的是，绝对定位会使元素脱离文档流，可能会影响其他元素的布局，因此需要根据实际情况进行调整。
>  *  [https://www.zhangxinxu.com/wordpress/2015/08/css-centering-absolute-translate/][https_www.zhangxinxu.com_wordpress_2015_08_css-centering-absolute-translate]

### 屏幕中央 的css样式： ###

#myDiv {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      font-size: medium;
      border: 2px solid #28e5d8f0;
      padding: 10px 40px;
      background: #a1eec5;
      width: 350px;
      border-radius: 25px;
      -moz-border-radius: 25px;
    }

--------------------

### 表单代码： ###

<!DOCTYPE html>
    <html>
    
    <head>
        <title>数据提交页面</title>
    
        <style>
            /*         #myDiv {
                text-align: center;
                font-size: medium;
                border: 2px solid #28e5d8f0;
                padding: 10px 40px;
                background: #a1eec5;
                width: 350px;
                border-radius: 25px;
                -moz-border-radius: 25px;
            } */
            #myDiv {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
                font-size: medium;
                border: 2px solid #28e5d8f0;
                padding: 10px 40px;
                background: #a1eec5;
                width: 350px;
                border-radius: 25px;
                -moz-border-radius: 25px;
            }
    
            #span_style {
                text-align: center;
                font-size: 35px;
                font-weight: 400;
            }
    
            #form_style {
                display: flex;
                justify-content: center;
            }
    
            #table_style {
                width: 68%;
            }
        </style>
    </head>
    
    <body>
        <div id="myDiv">
            <span id="span_style">
                添加用户
            </span>
    
            <br>
            <form action="b.jsp" method="post" id="form_style">
                <table id="table_style">
                    <tr>
                        <td>
                            编号：
                        </td>
                        <td>
                            <input type="text" name="userid" required>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            姓名：
                        </td>
                        <td>
                            <input type="text" name="username" required>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            性别：
                        </td>
                        <td>
                            <input type="text" name="sex" required>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <button type="submit">提交</button>
                            <button type="reset">重置</button>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </body>
    
    </html>

#### 效果： ####

![4fa2e649d446462b8bc436f8ed85d371.png][]

--------------------

### 有背景 ###

<!DOCTYPE html>
    <html>
    
    <head>
        <title>数据提交页面</title>
    
        <style>
            #body_style{
                background-color: #c7f5db;
            }
            #myDiv {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
                font-size: medium;
                border: 3px solid #28e5d8f0;
                padding: 10px 40px;
                background: #a1eec5;
                width: 350px;
                border-radius: 25px;
                -moz-border-radius: 25px;
            }
    
            #span_style {
                text-align: center;
                font-size: 35px;
                font-weight: 400;
            }
    
            #form_style {
                display: flex;
                justify-content: center;
            }
    
            #table_style {
                width: 68%;
            }
        </style>
    </head>
    
    <body id="body_style">
        <div id="myDiv">
            <span id="span_style">
                添加用户
            </span>
    
            <br>
            <form action="succeed.html" method="post" id="form_style">
                <table id="table_style">
                    <tr>
                        <td>
                            编号：
                        </td>
                        <td>
                            <input type="text" name="userid" required>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            姓名：
                        </td>
                        <td>
                            <input type="text" name="username" required>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            性别：
                        </td>
                        <td>
                            男<input type="radio" value="男" name="sex" required checked> 
    
                                     
    
                            女<input type="radio" value="女" name="sex" required>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <button type="submit">提交</button>
                            <button type="reset">重置</button>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </body>
    
    </html>

#### 效果： ####

![a9d00d47c43b4a6591ede3857d5d51f5.png][]

[https_www.zhangxinxu.com_wordpress_2015_08_css-centering-absolute-translate]: https://www.zhangxinxu.com/wordpress/2015/08/css-centering-absolute-translate/
[4fa2e649d446462b8bc436f8ed85d371.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/cf83259206b648da89edbf1779af33bd.png
[a9d00d47c43b4a6591ede3857d5d51f5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e32bce4665d94d2a87194c9487664831.png