水平垂直居中定位的几种方法

水平垂直居中可以分为两类，一类是居中元素宽高已定，一类是居中元素宽高未定。

对于居中元素宽高已知的情况，可以用下列方法：

• position:absolute + margin-top/left: -定位元素宽高一半 + 定位：top: 50%, left: 50%
• position:absolute + margin: auto + 定位： top: 0; right: 0, bottom:0, left:0
• position:absolute + 定位: top/left:calc(50% - 定位元素宽高一半)

对于宽高不一定的情况：可以使用下列方法：

• position: absolute + transform
• line-height
• table-cell + text-align + vertical-align + inline-block
• fllex
• grid
• table
• writing-mode

下面将逐一介绍他们的使用方法和实现原理

居中元素宽高已知

position absolute + 负margin

实现原理：绝对定位都是相对于元素的边缘的，比如top:50%则是元素的上边缘相对于定位元素的下移50%,同理，我们设置left:50%的时候则是相对左边缘进行位移

实现关键：

<div class="parent"> <!-- 相对定位的父元素  -->
    <div class="content">垂直居中定位的子元素</div>
</div>

.parent{
    position: relative;
}
.content{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* 值是宽的一半*/
    margin-top: -50px; /* 值是高的一半 */
}

position: absolute + margin auto

实现原理：绝对定位之后设置每个方向的定位都为0，再利用margin:auto填充各个方向上的间隙，整体就水平垂直居中了

实现关键：

<div class="parent"> <!--相对定位的父元素-->
    <div class="content">水平垂直居中的元素</div>
</div>

.parent{
    position: relative;
}
.content{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

position:absolute + calc属性

实现原理：利用CSS的Calc属性，直接将元素定位到水平垂直居中位置

关键实现：

<div class="parent">  <!--相对定位的父元素-->
    <div class="content">水平垂直居中的元素</div>
</div>

.parent{
    position: relative;
}
.content{
    position: absolute;
    width: 100px;
    height: 100px;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

居中元素宽高未知的情况

table-cell

实现原理： 定位为table-cell的子元素有自己的计算规则，可以实现table-cell

实现关键：

<div class="parent"> <!--父元素-->
    <!--子元素块-->
    <div class="cell">
        <div class="content">子元素</div>
    </div>
</div>

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

position: absolute + transform

实现原理：transform是的百分比是相对于自己宽高来计算的，所以就能配合绝对定位一起实现

实现关键：

<div class="parent">    <!--相对定位的父元素-->
    <div class="content">子元素</div>
</div>

.parent{
    position: relative;
}
.content{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translateX(50%) translateY(50%);
}

lineheight

实现关键：

<div class="parent">
	<div class="content-box">
		<div class="content">承载内容的子元素</div>
	</div>
</div>

.content-box{
    lineheight: ;/*父元素的高*/
    vertical-align: middle;
    text-align: center;
}
.content{
    display: inline-block;
}

flex

flex是现代化的布局系统，在移动端的兼容性很好

实现示例：

<div class="parent">
    <div class="content">承载内容的子元素</div
</div>

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

table

grid

write-mode