美文网首页
CSS实现水平垂直居中

CSS实现水平垂直居中

作者: Joe_Somebody | 来源:发表于2017-05-14 09:49 被阅读0次

负边距+定位:水平垂直居中(Negative Margin)
使用绝对定位将content的定点定位到body的中心,然后使用负margin(content宽高的一半),
将content的中心拉回到body的中心,已到达水平垂直居中的效果。


<style type="text/css">

    .align-center{
      

        position:absolute;

        left:50%;

        top:50%;

        width:400px;

        height:400px;

        margin-top:-200px;

        margin-left:-200px;

        border:1px dashed #333;

    }
</style>

相关文章

网友评论

      本文标题:CSS实现水平垂直居中

      本文链接:https://www.haomeiwen.com/subject/rqtqxxtx.html