码迷,mamicode.com
首页 > Web开发 > 详细

css实现垂直水平居中

时间:2018-11-30 18:23:29      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:垂直   ack   遮罩层   div   absolute   ati   pos   width   auto   

 1.利用translate的偏移定位。

#app{
    background:green;
    width:500px;
    height:500px;
    position:relative;
}
#box{
    background:red;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
} 

  2.利用flex布局

#app {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 500px;
}
#box{
  width: 100px;
  height: 100px;
}

  备注:css遮罩层

<div id=‘app‘></div>
<div id="box"></div>
#app{
    background:green;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
}
#box{
    background:red;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    width:300px;
    height:300px;
    margin:auto;
}

 学习:https://segmentfault.com/a/1190000017198399

css实现垂直水平居中

标签:垂直   ack   遮罩层   div   absolute   ati   pos   width   auto   

原文地址:https://www.cnblogs.com/yaoya/p/10045599.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!