絕對定位left:50% 隱式設置了寬度
不定寬高的盒子如何在父盒子中垂直居中，我們常做的一種方式便是
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
那這個盒子是否隱式添加了寬度嗎？
測試
html
<body>
<div class="container">
<div class="box">
<p>
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</p>
</div>
</div>
</body>
css
body{
margin: 0;
}
.container {
height: 200px;
position: relative;
margin: 50px auto;
border-top: 2px solid #333;
border-bottom: 2px solid #333;
}
.box {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
頁面樣式
這種很合理，並沒有出現上述的問題
驚喜出現了，當在句中加個空格
居然換行了，像是給了一個寬度似的，最后審查時，發現為960px(電腦是1920的屏，剛好一半) 網友
結論
-
上述問題，確實是對的，但是有前提，若是連續沒有空格的句子，是不會出現的，要出現兩種方式
- 句子中間添加空格
- 給 當前元素添加
word-break: break-all,強行換行
-
解決這類問題，便是不用這種方式進行居中形式，換另一種
top: 0; left: 0; right: 0; bottom: 0
如此便不會只有父元素的一半寬度了