首先，我確信有人已經回答了與我所要求的非常相似的問題，但我找不到特定的資源，并且多種不同的方法產生了不同的結果，這些結果都不令人滿意。最初我只是通過 `mx-[40%] mt-[10%]' 將我的潛水準確地固定在螢屏的中心，這對于我的確切螢屏尺寸來說沒問題，但是任何縮放或視口操作突然使所有的縱橫比變得非常奇怪你可以說它關閉了。
我嘗試做的第二件事是通過 like 修復外觀，aspect-[4/3]然后讓它以 flex box 或其他東西為中心，但沒有任何外觀值實際上正確地塑造了潛水，它總是會完全延伸到螢屏上。
最后，我在堆疊溢位時四處尋找與我有類似問題的人，但他們的解決方案對我不起作用，盡管這似乎是我的確切問題。所以我提出了這個：
但這就是它在 100% 的略微非標準解析度下的外觀 仍然不是完全居中。
uj5u.com熱心網友回復：
如果您使用的是 Tailwind，則有兩種選擇：
如果要居中的元素是絕對的或固定的：
應用以下類名：top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2。但請確保將relative定位設定為您希望它居中的父級。
否則，您可以簡單地用一個作為 flexbox 的元素包圍您的元素<div>，采用全寬，并讓元素居中對齊，如下所示：
<div className="flex justify-center w-full">Centered Element</div>
您可以在我的 Tailwind Playground 上看到作業示例：https ://play.tai??lwindcss.com/ddsnarMIob
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/525141.html
上一篇：串列項中的css懸停效果高度
下一篇：僅在反應時切換一個li元素