元素水平垂直居中的方式

元素水平垂直居中的方式

元素分为行内元素和块级元素，行内元素有1种方式设置元素垂直居中；块级元素有4种方式设置元素垂直居中。

行内元素

1. 通过为父元素设置text-align、line-height属性实现元素垂直居中

.box{
	width:500px;
	height:100px;
	border:1px solid #333;
	line-height:100px;
	text-align:center;
}
<div class="box">
	<span>content</span>
</div>

块级元素

1. 通过设置子元素的绝对定位和margin属性实现元素垂直居中（减去自身宽度高度的一半）

.box{
    width: 500px;
    height: 500px;
    border: 1px solid #333;
    position: relative;
}
.box div{
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
<div class="box">
	<div></div>
</div>

2. 通过设置父元素flex弹性布局的方式实现元素垂直居中（项目在主轴上的对齐方式为居中，项目在交叉轴上对齐方式为居中）

.box{
    width: 500px;
    height: 500px;
    border: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box div{
     width: 100px;
     height: 100px;
     border: 1px solid #333;
}
<div class="box">
        <div></div>
</div>

3. 通过设置子元素的绝对定位和transform属性实现元素垂直居中（往x轴、y轴分别移动自身宽度和高度的50%）

.box{
    width: 500px;
    height: 500px;
    border: 1px solid #333;
    position: relative;
}
.box div{
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
<div class="box">
	<div></div>
</div>

4. 通过设置子元素的绝对定位和margin属性实现元素垂直居中（不存在兼容性问题，自适应宽高）
   原理：
   设置margin:auto分配左右的剩余空间，所以元素可以水平居中；设置绝对定位，此时margin-top、margin-bottom从默认为0变成auto，设置top、right、bottom、left为0将找到父元素的位置（给浏览器重新分配一个边界框），填充其父元素的所有可用空间，margin垂直方向有了可分配的空间，所以此时元素可以垂直居中。

.box{
    width: 500px;
    height: 500px;
    border: 1px solid #333;
    position: relative;
}
.box div{
     width: 100px;
     height: 100px;
     border: 1px solid #333;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
}
<div class="box">
	<div></div>
</div>

问题：元素垂直居中有哪几种方式、如何实现固定宽高的DOM元素的水平垂直居中
知识点：块级元素与行内元素、margin原理、flex布局