css布局之水平垂直居中

最新推荐文章于 2024-12-04 20:36:19 发布

原创最新推荐文章于 2024-12-04 20:36:19 发布 · 231 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#水平垂直居中

html 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了网页设计中实现水平垂直居中的四种方法，包括使用transform、弹性盒子、table布局及负边距等技巧，适合前端开发初学者掌握。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天整理了一些和水平垂直居中有关的东西，特意发出来和大家一块分享，如有不足之处还希望大家指出。（微笑脸）

水平垂直居中是非常常见的页面布局基础，但是对于很多初学者来说，总是会出现一些问题，接下来我们具体的实现一下。

html文件

<body>
        <div class="contain">
            <div class="wrap">
                <div class="hea">
                    <label>手机号：</label>
                    <input type="text" />
                </div>
                <div class="mid">
                    <input type="text" />
                    <button>获取验证码</button>
                </div>
                <div class="foot">
                    <button>提交</button>
                </div>
            </div>
        </div>
    </body>

第一种方法：transform

            .contain{
                position: absolute;
                top: 50%;
                left:50%;
                -webkit-transform: translate(-50%, -50%);  
                transform: translate(-50%, -50%);

            }

这种方法如果你不太了解，希望你能多看一看css3相关的部分。

第二种方法：弹性盒子

.contain{

                height:750px;   
                display: flex;  
                align-items: center;  
                justify-content: center;  
            }

第三种方法： table布局

contain{
                display:table;
                width: 100%;
                height: 700px;
            }
            .wrap{
                display: table-cell;
                vertical-align: middle;
                text-align: center;
            }

第四种方法：利用负边距水平垂直居中

.contain{
                position: absolute;
                left:50%;
                top:50%;
                margin-left:-100px;
                margin-top:-100px;
            }