基础系列：布局解决方案【垂直居中】

思路一absolute+transform 没有效果

  1. 先top:50%,在transform:translateY(-50%); 在向上移动自身的一半
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .parent{
            position: relative;
        }
         .child{
             position: absolute;
             top: 50%;
             transform: translateY(-50%);
         }
         
    </style>
</head>
<body>
    
    <div class="parent">
        <div class="child">DEMO</div>
    </div>
    
    
</body>
</html>

 

思路二flex+align-items

  1. 父div设置position:flex; 子div的内容会拉伸，占满整个空间；
  2. 父div设置align-items：center; 子div内容会居中；
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .parent{
            position: flex;
            align-items:center;
        }
                  
    </style>
</head>
<body>
    
    <div class="parent">
        <div class="child">DEMO</div>
    </div>
    
    
</body>
</html>

 

posted @ 2015-08-04 21:42  哪有公园可以住的呀  阅读(145)  评论(0)    收藏  举报