描述

有如下模型,想办法让

<style>.box{width: 500px;height: 500px;background: skyblue;}</style><div class="box"><div class="inner"></div></div>

想办法让inner在box中水平垂直居中

方案1: 使用绝对定位

让子盒子相对于父盒子绝对定位,然后距离 左/上 边50%,在将外边距设为盒子 宽/高 的一半

代码如下:

.box{position: relative;width: 150px;height: 150px;background: skyblue;}.inner{position: absolute;width: 50px;height: 50px;left: 50%;top: 50%;margin-left: -25px;margin-top: -25px;background: lightcoral;}

方案2: 使用transform

上面需要手动移动子盒子的宽高,即每次都要计算子盒子的宽高/2,可以尝试使用CSS3的transform属性,将盒子在水平和垂直方向移动-50%代码如下:

.inner {position: absolute;width: 50px;height: 50px;left: 50%;top: 50%;transform: translate(-50%, -50%);background: lightcoral;}

方案3: margin…

此方法比较奇怪…思路是利用绝对定位,让盒子的left top right bottom全部为0,然后设置margin为auto代码如下

.inner {position: absolute;width: 50px;height: 50px;left: 0;top: 0;right: 0;bottom: 0;margin: auto;background: lightcoral;}

方案4: 使用js

使用js先获取父盒子的 宽/高在获取子盒子的宽高,然后使用绝对定位,将左边距设置为 (父盒子宽 - 子盒子宽) / 2

<script>var box = document.querySelector('.box')var inner = document.querySelector('.inner')// 父盒子 宽高var bW = box.offsetWidthvar bH = box.offsetHeight// 子盒子 宽/高var iW = inner.offsetWidthvar iH = inner.offsetHeightinner.style.position = 'absolute'inner.style.left = (bW - iW) / 2 + 'px'inner.style.top = (bH - iH) / 2 + 'px'</script>

方案5: flex布局

个人认为最简单最棒的一种布局只需设置父元素的布局为flex布局,然后设置justify-content和align-items属性代码如下:

<style>.box {display: flex;justify-content: center;align-items: center;width: 150px;height: 150px;background: skyblue;}.inner {width: 50px;height: 50px;background: lightcoral;}</style>

方案6: table-cell

思想是将子盒子变成文本的形式(inline-block)然后向控制文本水平垂直居中

<style>.box {display: table-cell;text-align: center;vertical-align: middle;width: 150px;height: 150px;background: skyblue;}.inner {display: inline-block;width: 50px;height: 50px;background: lightcoral;}</style>