网页布局解决方案-居中（水平居中，垂直居中，水平垂直居中） html css

水平居中（在父元素和子元素宽度都不确定的情况下）

示例：

<div class="parent">
        <div class="child">DEMO</div>
    </div>

div块级元素会撑满整个宽度，默认情况为：

方法一 ：inline-block + text-align

.child {
            display: inline-block;
        }

inline-block的宽度是根据内容来定的，内容有多快它就有多宽

通过设置文字居中来使child居中

.parent {
            text-align: center;
        }
        .child {
            display: inline-block;
        }

优点：兼容性好（IE8及以上，若要兼容IE6 7可将父级子级全设置为table元素）
确定：子级元素会继承父级的文字居中，若想要子级文字不居中，则需要单独进行设置。例如单独在子元素中加 text-align：left .

方法二：table + margin

.child {
            display: table;
            margin: 0 auto;
        }

table类似block元素，但宽度是根据内容定的

优点：只设置了child，支持IE8以上

方法三：absolute + transform

.parent {
            position: relative;
        }
        .child {
            position: absolute;
            left: 50%;
        }

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

absolute定位的宽度也是根据内容来确定的，transform用百分比时参照物为自身
优点：只改变了子元素，不会影响其他元素
缺点：transform为css3新增，兼容性不好

方法四：flex + justify-content

.parent {
            display: flex;
            justify-content: center;
        }

父级设置了flex后所有子元素都变为flex-items，其宽度默认为auto，即为内容的宽度
优点：只需设置父级元素parent
确定：兼容性不好，flex对如 IE6 7 8 等低版本浏览器不支持
也可以单独对子元素进行设置：

.parent {
            display: flex;
        }
        .child {
            margin: 0 auto;
        }

---

垂直居中（在父元素和子元素高度都不确定的情况下）

方法和水平居中类似
示例：

<div class="parent">
        <div class="child">DEMO</div>
    </div>

方法一：table-cell + vertical-align

.parent {
            display: table-cell;
            vertical-align: center;
        }

优点：兼容性好（IE8及以上）

方法二：absolute + transform

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

方法三：flex + align-item

.parent {
            display: flex;
        }

当父容器设置 flex 后，其子元素的align-items 默认高度为 stretch，会撑满整个容器的高

再对它的align-items单独设置即可

.parent {
            display: flex;
            align-items: center;
        }

---

水平垂直居中（在父元素和子元素宽高都不确定的情况下）

结合前面两张居中方法即可
示例：

<div class="parent">
        <div class="child">DEMO</div>
    </div>

方法一

.parent {
            text-align: center;
            display: table;
            vertical-align: middle;
        }
        .child {
            display: inline-block;
        }

方法二

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

方法三

.parent {
            display: flex;
        }

.parent {
            display: flex;
            justify-content: center;
            align-items: center;
        }