首页 > 程序开发 > web前端 > HTML/CSS >

用弹性布局实现垂直左右居中

2017-04-12

用弹性布局实现垂直左右居中,以下代码是用弹性布局实现垂直左右居中的例子。

用弹性布局实现垂直左右居中,以下代码是用弹性布局实现垂直左右居中的例子。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  *{
    margin: 0;
    padding: 0;
  }  
  .wrap{
    width: 100px;
    height: 100px;      
    border: 1px solid #000;
    margin: 3.125em auto;   
    display: flex;
    justify-content: center;
    align-items: center;
 
  }
  .in{      
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 50%;
  }
  </style>
</head>
<body>  
  <div class="wrap">
    <div class="in"></div>
  </div>
</body>
</html>

其中3.125em=50px;因为em是相对于父容器设置的长度单位,而浏览器默认的字体大小为16px,所以此时1em=16px,即3.125em=3.125 * 16=50px;

display:flex; 设置.wrap为弹性布局

justify-content:center;定义项目在主轴(水平方向)上居中对齐

align-items:center;定义项目在交叉轴(垂直方向)上居中对齐

程序运行结果:

\

相关文章
最新文章
热点推荐