HTML水平垂直居中的几种方式

HTML水平垂直居中的几种方式

页面结构

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

. 父元素，子元素宽高已知

1.用margin和padding就行了，但要注意给第一个不为浮动的子元素添加margin-top时会错误的添加给父元素

.parent{
            width: 400px;
            height: 300px;
            margin: 100px auto;
            background-color: aqua;
            padding-top: 100px;
        }
        .child{
            margin: auto;
            width: 200px;
            height: 200px;
            background-color:indianred;
        }

2.表格布局，将父元素设置为display：table-cell

.parent {
            width: 400px;
            height: 400px;
            background-color: aqua;
            display: table-cell;
            vertical-align: middle;
        }

        .child {
            margin: auto;
            padding: 20px;
            width: max-content;
            height: max-content;
            background-color: indianred;
        }

父元素宽高，子元素宽高未知

1. 最简单的方法，flex布局，但这种方法兼容性低，不兼容低版本IE

.parent {
            width: 50%;
            height: 50%;
            background-color: aqua;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .child {
            width: max-content;
            background-color: indianred;
        }

2.第二种用定位，分别设置上下左右都为0，然后margin：auto，但子需要有宽高，不然会被拉伸到和父元素一样大，设置子元素宽高为最大内容

.parent {
            width: 50%;
            height: 50%;
            background-color: aqua;
            margin: 0 auto;
            position: relative;

        }
        .child {
            padding: 20px;
            width: max-content;
            height: max-content;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background-color: indianred;
        }

3.还是定位，子元素相对定位，设置top：50%，left：50%，这时候子元素的左上角来到父元素中点的位置，子元素只需要向上向左分别位移自身宽高的一半就行了

.parent {
            width: 50%;
            height: 50%;
            background-color: aqua;
            margin: 0 auto;
        }
        .child {
            padding: 20px;
            width: max-content;
            height: max-content;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: indianred;
        }

4.子元素转成inline-block利用 vertical-align: middle;进行水平居中，但vertical-align: middle;需要一个参照物，有两种方法：

• 添加一个空元素

<div class="parent">
        <div class="child">
            我是child
        </div><span></span>
    </div>

.parent {
            width: 50%;
            height: 50%;
            background-color: aqua;
            text-align: center;
        }

        .child {
            display: inline-block;
            vertical-align: middle;
            margin: auto;
            padding: 20px;
            width: max-content;
            height: max-content;
            background-color: indianred;
        }
        span {
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }

• 使用after伪类

.parent {
            width: 50%;
            height: 50%;
            background-color: aqua;
            text-align: center;
        }

        .child {
            display: inline-block;
            vertical-align: middle;
            margin: auto;
            padding: 20px;
            width: max-content;
            height: max-content;
            background-color: indianred;
        }
        .parent::after {
            content: "";
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }