实现水平垂直居中的五种方法

水平垂直居中

<div class="wrapper">
    <div class="inner">
    </div>
</div>

1. 定位 + margin 方法

• 定位 + margin : auto;

.wrapper{
    position:relative;
    width:300px;
    height:300px;
    border:1px solid black;
}
.inner{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:100px;
    height:100px;
    background:orange;
    margin:auto;
}

• 定位 + 负 margin

.wrapper{
    position:relative;
    width:300px;
    height:300px;
    border:1px solid black;
}
.inner{
    position:absolute;
    top:50%;
    left:50%;
    width:100px;
    height:100px;
    background:orange;
    margin-top:-50px;
    margin-left:-50px;
}

• 定位 + transform

.wrapper{
    position:relative;
    width:300px;
    height:300px;
    border:1px solid black;
}
.inner{
    position:absolute;
    top:50%;
    left:50%;
    width:100px;
    height:100px;
    background:orange;
    transform:translate(-50%,-50%)
}

2. 父元素 display:table-cell; 方法

.wrapper{
    width:300px;
    height:300px;
    border:1px solid black;
    display:table-cell;
    vertical-align:middle;
}
.inner{
    width:100px;
    height:100px;
    background:orange;
    margin: 0 auto;
}

3. flex 弹性盒子 方法

.wrapper{
    width:300px;
    height:300px;
    border:1px solid black;
    display:flex;
    justify-content:center;
    align-items:center;
}
.inner{
    width:100px;
    height:100px;
    background:orange;
}

4. inline-block + 伪元素 方法

.wrapper{
    width:300px;
    height:300px;
    border:1px solid black;
   text-align:center;
}
.wrapper::after{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle; 
}
.inner{
    width:100px;
    height:100px;
    background:orange;
    display:inline-block;
    vertical-align:middle;
}

5. calc() + margin 方法

注意：运算符 - 或 + 两侧要加 空格

.wrapper{
    width:300px;
    height:300px;
    border:1px solid black;
}
.inner{
    width:100px;
    height:100px;
    background:orange;
    margin:calc((100% - 100px)/2);
}