元素垂直居中

2018-06-24 02:02:44来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

1、表格实现

父级{display:table;}
子级{display:table-cell;vertical-align:middle;}
display:table- cell属性类似于td标签。会受一些css属性破坏:float,position:absolute;display与这些样式同用会失去效果。而且table-cell对margin无反应。
 

2、inline-block设置垂直居中

<style>
     html,body{height:100%;}
     .wrapper{height:100%;}
     /* 在content容器之前构造一个空内容的inline-block,让空内容行内上下对齐 */
     .wrapper:before{content:"";display:inline-block;height:100%;vertical-align: middle;}
     .content{width:98%;display:inline-block;vertical-align: middle;}
</style>
<div class="wrapper">
     <div class="content">content</div>
</div>

 

3、flex布局实现居中

{
    display: flex;
    justify-content: center;   /* 水平居中 */
    align-items: center;     /* 垂直居中 */
}

 

4、居中定位

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    width:50%;
    height: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);  
}

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:css实现六边形图片(最简单易懂方法实现高逼格图片展示)

下一篇:HTML Entity 字符实体(字符转义)