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

思路一 inner-block+text-align +table-cell+vertical-align

  1. 水平居中  inner-block+text-align
  2. 垂直居中 table-cell+vertical-align 

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .parent{
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
        .child{
            display: inline-block;
        }
                  
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">DEMO</div>
    </div>
</body>
</html>

思路二absolute+transform

  1. 子div是绝对定位；
  2. 使用left&top& translate移动
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .parent{
            position: relative;
        }
        .child{
            position: absolute;
            left: 50%;
            top: 50%;
            transform:translate(-50%,-50%);
        }
                  
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">DEMO</div>
    </div>
</body>
</html>

思路三flex+justify-content+align-items

  1. justify-content:center 水平居中.
  2. align-items:center; 垂直居中。
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .parent{
            display: flex;
            justify-content:center;
            align-items:center;
        }                  
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">DEMO</div>
    </div>
</body>
</html>

 

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