页面常见布局

居中布局是我们日常开发页面的时候常用的布局技术，下面说说【水平居中】、【垂直居中】和【水平垂直居中】常见的几种方案，注意：这里说的div的大小都不固定

页面html的结构：

    <div class="parent">
        <div class="child">this is child</div>
    </div>
复制代码

默认样式：

    * { margin: 0; }
    .parent {
        background: gray;
    }
    .child {
        background: pink;
    }
复制代码

水平居中

1. text-align + inline-block
   设置child的inline-block，同时设置parent的text-align:center

    .parent { text-align: center; }
    .child { display: inline-block; }
复制代码

2. table + margin: auto
   设置了display: table的元素，支持margin: auto，所以可以用这个方法来居中

    .child { display: table; margin: 0 auto; }
复制代码

3. absolute + transform
   绝对定位的方法我们已经很熟悉了，先用left：50%把child定位到中间，让child向左偏移自身宽度的50%就可以了

    .parent { position: relative; }
    .child { position: absolute; left: 50%; transform: translateX(-50%); }
复制代码

4. flex + justify-content

    .parent { display: flex; justify-content: center; }
复制代码

5. flex + margin: auto
   设置了flex的元素也支持margin:auto，所以这也是一种方法

    .parent { display: flex; }
    .child { margin: 0 auto; }
复制代码

垂直居中布局

1. table-cell + vertical-align
   表格的单元格天然就支持vertical-align:middle垂直居中，所以可用表格来实现垂直居中的效果

    .parent { display: table-cell; vertical-align: middle; }
复制代码

2. absolute + transform
   和上面的垂直居中的方法一样

    .parent { position: relative; }
    .child { position: absolute; top: 50%; transform: translateY(-50%); }
复制代码

3. flex + align-items
   默认align-items是拉伸的，为了让其垂直居中，设置align-items: center就可以

    .parent { display: flex; align-items: center; }
复制代码

水平和垂直都居中的布局

上面知道了垂直和水平居中各自的方法，把他们结合起来就可以实现同时居中的效果啦

1. inline-block + text-align + table + vertical-align

    .parent { text-align: center; display: table-cell; vertical-align: middle; }
    .child { display: inline-block; }
复制代码

2. flex + justify-content + align-items

    .parent { display: flex; align-items: center; justify-content: center; }
复制代码

3. absolute + transform

    .parent { position: relative; }
    .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
复制代码

转载于:https://juejin.im/post/5bde4b21e51d454e755f78d8