...
目录
- 方法一：定位（1）
- 方法二：定位（2）
- 方法三：定位（3）
- 方法四：display:flex
- 方法五：使用JavaScript
- 方法一：margin
- 方法二：text-align+inline-block
- 方法三：position定位（1）
- 方法四：position定位（2）
- 方法五：display:flex
- 方法一：position定位（1）
- 方法二：position定位（2）
- 方法三：display:flex
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
注意：该方法需要已定义盒子的宽度
方法二：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;
}