css3实现div上下左右居中

css3实现div上下左右居中

关键知识点:position & transform: translate(-50%, -50%)html css3html, body .wraper { width: 80%; height: 80%; background-color: #ddd; } .inside .c...

位置:首页 > 动态 > 前端代码 > css3实现div上下左右居中

css3实现div上下左右居中

关键知识点:position & transform: translate(-50%, -50%)


html

<body>
    <div class="wraper center">
        <div class="inside center"></div>
    </div></body>

css3

html,    body {        width: 100%;        height: 100%;        position: relative;    }

    .wraper {        width: 80%;        height: 80%;        background-color: #ddd; 
    }

    .inside {        width: 30%;        height: 30%;        background-color: blue;    }

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

效果图

页面宽高正常显示时:

css3.jpg

关键词:

上一篇: 前端开发:CSS3文字渐变代码

下一篇: 网站设计中用到的几种JQuery Show()效果

版权所有www.Zding.cn © 2017 贵州钟鼎网络科技有限责任公司 版权所有. 黔ICP备11002213号
贵阳遵义黔西南0851-82216110
观望只会错过创造美好的机会
线上服务咨询 0851-82216110 填写需求索取报价