再談自適應垂直居中

做者：滴滴公共前端團隊 - Neurotoxin

新年第一篇，首先祝福你們新年好~

最近在開發一個 Toast組件時，遇到了一些有趣的問題，首先來看一下需求

需求爲寬高不定，上下左右垂直居中，以下圖

代碼以下：

HTML

<div class="toast">提交成功</div>複製代碼

CSS

.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 13px 16px;
  font-size: 14px;
  color: #ccc;
  background-color: rgba(37, 38, 45, 0.9);
  border-radius: 2px;
}複製代碼

搞定 ~

But !

這時候產品忽然須要增長一個需求，Toast 組件一行最多隻能有 12 箇中文字符，超過的時候折行

看起來這個要求也不高 ~ 咱們修改一下代碼

CSS

.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 13px 16px;
  font-size: 14px;
  color: #ccc;
  background-color: rgba(37, 38, 45, 0.9);
  border-radius: 2px;
  // 新增代碼以下
  width: auto;
  max-width: 12em;
}複製代碼

效果以下圖

能夠看到，最終實現效果在第 9 個字的時候便折行了。

這是爲何呢？咱們把

transform: translate(-50%, -50%)

去掉看一下

能夠看到容器寬度在到達屏幕邊界的時候就被截斷折行了。

如今咱們設定 left: 90% 看一下

能夠明顯的看到容器被截斷的更加嚴重。

至此咱們分析得知，設置爲 position: fixed的元素不只位置是相對於屏幕邊界定位，若是不指定元素寬高的話，寬高一樣也會相對於屏幕邊界被截斷。

那麼如何解決這個問題呢 ~

代碼以下 ~

HTML

<div class="toast-container">
  <div class="toast">測試十二個字提交成功狀態</div>
</div>複製代碼

CSS

.toast-container {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 100%;
  top: 100%;
}
.toast {
  position: absolute;
  top: -50%;
  left: -50%;
  transform: translate(-50%, -50%);
  width: auto;
  max-width: 12em;
  padding: 13px 16px;
  font-size: 14px;
  color: #ccc;
  background-color: rgba(37, 38, 45, 0.9);
  border-radius: 2px;
}複製代碼

在 .toast 外加一個和屏幕寬高相同 .container 容器，將 .container 容器 fixed 定位到窗口外層，再將 .toast 經過 absolute 定位翻轉過來便可。

最終效果：

搞定！

---

歡迎關注DDFE
GITHUB：github.com/DDFE
微信公衆號：微信搜索公衆號「DDFE」或掃描下面的二維碼