水平居中+垂直居中

Posted 2021-01-26 zgdawdl

页面结构都是:

<div class="parent" style="background-color:red;width: 400px;height: 400px;">
    <div class="child" style="background-color:blue;width: 200px;height: 200px;"></div>
</div>

一、水平居中

1.设置父元素和子元素，inline-block+text-align：ie6↑

.parent {
    text-align: center;
}

.child {
    display: inline-block;
}

2.设置子元素，table+margin： ie8↑

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

3.设置父元素和子元素，absolute+transform：ie10↑

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

4.设置父元素和子元素，flex+margin：ie9↑

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

5.设置父元素，flex+justify-content：ie9↑

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

 

二、垂直居中

1.设置父元素，table-cell+vertical-align：ie8↑

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

2.设置父元素和子元素，absolute+transform：ie10↑

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

3.设置父元素，flex+align-items：ie9↑

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

 

三、水平+垂直

1.设置父元素和子元素，absolute+transform：ie10↑

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

2.设置父元素和子元素，inline-block+text-align+table-cell+vertical-align：ie8↑

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

3.设置父元素，flex+justify-content+align-items：ie9↑

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