网页布局解决方案-居中（水平居中，垂直居中，水平垂直居中） 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元素࿰