宽度高度不固定的div水平/垂直居中方法

责编:menVScode 2018-01-24 23:35 阅读(540)

        1、宽度高度不固定的div水平/垂直居中方法

div{
    width: 400px;
    height: 300px;
    border: 1px solid green;
    position: absolute;
    top:50%;
    left: 50%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}

        注:小伙伴不要误解这里div虽然是写死的,仅仅是当作测试用的,你们可以打开控制台手动调节div宽度高度,会发现依旧是水平/垂直居中的。


标签: 水平垂直居中
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码