CSS实现水平垂直居中

把content的div在wrapper的div中水平居中垂直

<code>

<div class="wrapper">

           <div class="content">text</div>

</div>

</code>

CSS实现:

第一种方法

<code>

.wrapper{position:relative;width:500px; height:500px;border:solid2px gray;}

.content{

         background-color:#6699FF;

         width:200px;

         width:200px;

         position: absolute;//父元素需要相对定位

        top: 50%;

        left: 50%;

        margin-top:-100px ;//二分之一的height,width

        margin-left: -100px;

}

</code>

第二种方法

<code>

.wrapper{position:relative;width:500px; height:500px;border:solid2px gray;}

.content{

         background-color:#6699FF;

         width:200px;

         height:200px;

        position: absolute;//父元素需要相对定位

        margin:auto;

        top:0px ;

       left: 0px;

       bottom:0px;

       top:0px;

}

</code>

第三种方法

<code>

.wrapper{position:relative;width:500px; height:500px;border:solid2px gray;}

.content{

        background-color:#6699FF;

        width:200px;

        height:200px;

        position: absolute;//父元素需要相对定位

        top: 50%;

        left: 50%;

        -webkit-transform:translateY(-50%) translateX(-50%);

        -mos-transform:translateY(-50%) translateX(-50%);

        transform: translateY(-50%) translateX(-50%);

}

</code>

第四种方法

<code>

.wrapper{position:relative;width:500px; height:500px;border:solid2px gray;display:table-cell;vertical-align:middle;}

.content{

         background-color:#6699FF;

         width:200px;

         height:200px;

        margin:0 auto;

}

</code>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 13,240评论 0 8
  • 1.给定宽高的容器 将它的margin设为自身宽高的一半。 例子: 绝对定为与margin 2.未知容器的宽高 利...
    落花的季节阅读 1,189评论 0 1
  • 前言 通常在mysql数据库表设计过程中碰到基础设置表时会有用到记录自动变更更新时间,这个时候往往会考虑到使用时间...
    散漫二丫阅读 6,313评论 0 1
  • 很多人都觉得编程入门特别难,特别在刚开始的时候,敢问切入一个新的行业不付出点努力,不坚持下不深刻的挖掘下自己的潜力...
    东辉在线阅读 248,605评论 31 46
  • 骨盆本身是一个稳定的结构,但在骨盆周边肌肉力量失衡的情况下,在腰椎和髋关节的作用下会发生以下活动:前后倾斜、上下...
    耀宝瑜贝阅读 5,115评论 0 0