水平垂直居中的方法

水平垂直居中的方法

其中的公共html

<div class="wp">
        <div class="box size">66666</div>
    </div>

第一种： 通过绝对定位的方式 absolute + 负margin
​ 首先知道子元素的宽高，给子元素设置top：50%；left：50%，

但绝对定位是基于子元素的左上角，我们所希望的效果是子元素的中心居中显示。。。。借助外边距的负值，负的外边距可以让元素向相反方向定位，

​ 通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了

css代码：

 /* 公共代码 */
        .wp {
            border: 1px solid red;
            width: 300px;
            height: 300px;
        }

        .box {
            background: green;
        }

        .box.size {
            width: 100px;
            height: 100px;
        }

        /* 定位代码 */
        .wp {
            position: relative;
        }

        .box {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }

**优点：**比较好理解，兼容性好

**缺点：**需要知道子元素的宽高

第二种: 也是通过绝对定位的方式 absolute + margin auto

​ 这个是需要将各个方向的距离都设0，再讲margin设为auto；就行

**优点：**兼容性也很好

**缺点：**需要知道子元素的宽高

css代码：

  /* 公共代码 */
        .wp {
            border: 1px solid yellow;
            width: 300px;
            height: 300px;
        }

        .box {
            background: #ddd;
        }

        .box.size {
            width: 100px;
            height: 100px;
        }
        /* 定位代码 */
        .wp {
            position: relative;
        }

        .box {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

第三种： absolute + calc（计算）

这种方法top的百分比是基于元素的左上角，那么在减去宽度与高度的一半就好了

**优点：**他的兼容性依赖的是calc的兼容性

**缺点：**同样是需要知道子元素的宽高

css代码：

 /* 公共代码 */
        .wp {
            border: 1px dotted blue;
            width: 300px;
            height: 300px;
        }

        .box {
            background: salmon;
        }

        .box.size {
            width: 100px;
            height: 100px;
        }

        /* 定位代码 */
        .wp {
            position: relative;
        }

        .box {
            position: absolute;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
        }

第四种： absolute + transform （过渡）

这个方法不需要子元素固定宽高

修复绝对定位的问题，还可以使用css3新增的transform，transform的translate

属性也可以设置百分比，其是相对于自身的宽和高，所以可以将translate设置为-50%，就可以做到居中了

**优点：**代码量少

**缺点：**IE8不支持, 属性需要追加浏览器厂商前缀, 可能干扰其他 transform 效果, 某些情形下会出现文本或元素边界渲染模糊的现象.

css代码：

  /* 公共代码 */
        .wp {
            border: 1px dotted purple;
            width: 300px;
            height: 300px;
        }

        .box {
            background: darkseagreen;
        }

        .box.size {
            width: 100px;
            height: 100px;
        }
        /* 内容部分 */
        .wp {
            position: relative;
        }

        .box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

第五种： line-height

只对文本有效果，对定宽高的div是没有用的。所以在文本水平垂直居中时使用。

优点：代码简洁

缺点：只对文本有效，只对单行文本有效，多行文本不可以

css代码：

   .wp {
            border: 1px dotted black;
            width: 300px;
            height: 300px;
        }
        .box{
            text-align: center;
            line-height: 300px;
            background:coral;
        }

第六种： writing-moden

这种方法稍微有些复杂，writing-mode可以改变文字的显示方向
这个的html文档是：

<div class="wp">
        <div class="wp-inner">
            <div class="box">123123</div>
        </div>
    </div>

css代码：

  /* 公共代码 */
         .wp {
            border: 1px double dodgerblue;
            width: 300px;
            height: 300px;
        }

        .box {
            background: darksalmon;
        }

        .box.size {
            width: 100px;
            height: 100px;
        }

        .wp {
            writing-mode: vertical-lr; /* 将文本有水平转垂直方向*/
            text-align: center;
        }
        /*
        writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
        horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom
        vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left
        vertical-lr：垂直方向内内容从上到下，水平方向从左到右
        sideways-rl：内容垂直方向从上到下排列
        sideways-lr：内容垂直方向从下到上排列
        
        */
        .wp-inner {
            writing-mode: horizontal-tb;
            display: inline-block;
            text-align: center;
            width: 100%;
        }
        .box {
            display: inline-block;
            margin: auto;
            text-align: left;
        }

第七种： table 形式

通过table单元格的形式设

**优点：**tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了

**缺点：**这个不是table的正确方法，不是很建议使用，但是也是可以实现的
html文档：

<table>
        <tbody>
            <tr>
                <td class="wp">
                    <div class="box">123123</div>
                </td>
            </tr>
        </tbody>
    </table>

css代码：

 /* 公共代码 */
        .wp {
            border: 1px solid red;
            width: 300px;
            height: 300px;
        }

        .box {
            background: green;
        }

        .box.size {
            width: 100px;
            height: 100px;
        }

        .wp {
            text-align: center;
        }

        .box {
            display: inline-block;
        }

第八种： table-cell实现水平垂直居中: table-cell middle center组合使用

​ 直接给父级设

 ``display: table-cell;
  ``vertical-align: middle;
  ``text-align: center;

为了可以明显看出，我们可以给它设个宽高与边框

 ``width: 240px;
  ``height: 180px;
  ``border:1px solid #666;

css代码：

 /* 实现代码 */
        .wp {
            width: 240px;
            height: 180px;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            border: 1px solid #ddd;
           
        }

第九种： 弹性盒子的方式

​ 通过给父元素设置justify-content: center;

​ align-items: center;就可以了

**优点：**移动端使用灵活自如

**缺点：**pc端需要根据兼容情况来判定

css代码：

  /* 公共代码 */
        .wp {
            border: 1px double dodgerblue;
            width: 300px;
            height: 300px;
        }

        .box {
            background: darksalmon;
        }

        .box.size {
            width: 100px;
            height: 100px;
        }

        /* 代码实现 */
        .wp {
            display: flex;
            justify-content: center;
            align-items: center;
        }

第十种： grid（网格布局）

​ 给父级设display:grid;

​ 给子元素设align-self: center;justify-self: center;

**优点：**代码量少

**缺点：**兼容不如flex，建议用flex

css代码：

 /* 公共代码 */
        .wp {
            border: 1px solid rgb(0, 162, 255);
            width: 300px;
            height: 300px;
        }

        .box {
            background: sienna;
        }

        .box.size {
            width: 100px;
            height: 100px;
        }
        /* 代码实现 */
        .wp {
            display: grid;
        }

        .box {
            align-self: center;
            justify-self: center;
        }```

这是目前总结好的10种方法，到此就ok了***********