css布局之水平垂直居中

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

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

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;
            }

以上方法亲测有效，也算是整理一下，为以后打好基础，大家有兴趣的可以店家我的GitHub上边有一些测试代码，大家可以点击star哦。

css布局之水平垂直居中

猜你喜欢