描述

• 有如下模型,想辦法讓

<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>