標籤：body style orm max http lan port cal har
1、基於絕對位置的解決方案
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /*垂直置中*/ /*絕對位置方案*/ .container { background: #003d94; position: relative; width: 100%; height: 300px;}.block { background: #6b0; max-width: 20%; padding: 20px 30px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style></head><body> <div class="container"> <div class="block"> <h3>Am I centered yet?</h3> <p>center me please!</p> </div> </div></body></html>
2、基於視口的解決方案
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .container2 { background: #87ceeb; width: 100%; height: 300px; margin-top: -367px; } .block2 { background: #ff4500; max-width: 20%; padding: 20px 80px; margin: 50vh auto 0; transform: translateY(50%); } </style></head><body> <div class="container2"> <div class="block2"> <h3>Am I centered yet?</h3> <p>center me please!</p> </div> </div></body></html>
3、基於flexbox的解決方案
請注意，當我們使用flexbox時，margin:auto不只是在水平方向上置中，垂直方向上也是如此。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /*基於flexbox的解決方案*/ .container3 { background: #bfdef3; width: 100%; height: 300px; display: flex; } .block3 { background: #ff4500; max-width: 20%; padding: 20px 80px; margin: auto; } </style></head><body> <div class="container3"> <div class="block3"> <h3>Am I centered yet?</h3> <p>center me please!</p> </div> </div></body></html>
CSS垂直置中
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
