CSS实现水平垂直居中

负边距+定位:水平垂直居中(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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 把content的div在wrapper的div中水平居中垂直 text CSS实现: 第一种方法 ....
    BrianAguilar阅读 441评论 2 4
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,787评论 1 92
  • 1.给定宽高的容器 将它的margin设为自身宽高的一半。 例子: 绝对定为与margin 2.未知容器的宽高 利...
    落花的季节阅读 175评论 0 1
  • 以后就他妈的自己过,
    zs97阅读 186评论 0 0
  • Hi,你现在一定在做着美梦 可能还是把脚丫子露出来,摆着奇怪的造型 然后闹钟一响 你会天然的抓手机 翻盖儿 输入密...
    婷不住阅读 350评论 0 0