將一個保持在身體邊緣的div保持偏差

該CSS挑戰涉及創建具有特定屬性的DIV：垂直和水平居中，用邊距的視口縮放，保持固定的縱橫比以及無JavaScript。提出了幾種解決方案：

正如安德魯·韋爾奇（Andrew Welch）所述，挑戰需要：

• 中心：垂直和水平。
• 縮放： DIV應調整大小以適合視口，同時保持邊距。
• 縱橫比：必須保留任意縱橫比。
• 無JavaScript：該解決方案必須僅使用CSS。

一些開發人員提供了解決方案，包括：

• Mark Huot：使用直接寬度/高度和縱橫比計算來確定邊緣。
• Amelia Wattenberger＆Eric A. Meyer：高度/寬度和最大寬度/最大寬度，以translate （Amelia）或Flexbox（ERIC）為中心。
• Brian Hart＆BenoîtRouleau：使用vmin單元進行縱橫比的大小，並以Flexbox為中心。 Benoît使用calc()進行邊緣調整。
• 喬納森·梅爾維爾（Jonathan Melville）：主要使用尾風CSS課程提出了一個解決方案。

安德魯·韋爾奇（Andrew Welch）最終贊成使用vmin單元的解決方案，儘管他承認他對calc()用於保證金減法的使用可能是不必要的。各種方法突出了CSS在解決這個佈局問題方面的靈活性。

以上是將一個保持在身體邊緣的div保持偏差的詳細內容。更多資訊請關注PHP中文網其他相關文章！