面试题：CSS盒子水平居中、垂直居中、水平垂直居中

1. 实现盒子水平垂直居中

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

方法一：定位（1）

注意：该方法需要考虑浏览器兼容问题

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

方法二：定位（2）

注意：该方法适用于盒子有宽高的情况

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

方法三：定位（3）

注意：该方法适用于盒子宽高已知的情况

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;     /* 自身 height 的一半 */
    margin-left: -50px;    /* 自身 width 的一半 */
}

方法四：display:flex

注意：该方法要考虑兼容的问题，该方法在移动端用的较多

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

方法五：使用JavaScript

<script>
	 let parent = document.getElementsByClassName('parent'),
	     child  = document.getElementsByClassName('child'), 
		parentW = parent.offsetWidth,
		parentH = parent.offsetHeight,
		childW = child.offsetWidth,
		childH = child.offsetHeight;
    parent.style.position = "relative";
	child.style.position = "absolute";
	child.style.left = (parentW - childW) / 2 + 'px';
	child.style.top = (parentH - childH) / 2 + 'px'; 
</script>

2. 实现盒子水平居中

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

方法一：margin

注意：该方法需要已定义盒子的宽度

.child {
    margin: 0 auto;
}

方法二：text-align+inline-block

注意：该方法适用于多种场景，盒子宽度可以不固定

.parent {
    text-align: center;
}
.child {
    display: inline-block;
}

方法三：position定位（1）

注意：该方法只适用于盒子宽高已知的情况

.parent {
    position:relative;
}
.child {
    position:absolute;
    left:50%;
    margin-left:-50px;
}

方法四：position定位（2）

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

方法五：display:flex

注意：该方法适用于多场景，不需要知道盒子的宽高

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

3. 实现盒子垂直居中

方法一：position定位（1）

注意：该方法只适用于盒子宽高已知的情况

.parent {
    position:relative;
}
.child {
    position:absolute;
    top:50%;
    margin-top:-50px;
}

方法二：position定位（2）

注意：该方法要考虑浏览器的兼容性

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

方法三：display:flex

注意：该方法适用于多场景，不需要知道盒子的宽高

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