首頁 > 開發者 > JavaScript
水平+垂直 置中，垂直置中
方案一
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>水平置中和垂直置中，並且父容器的寬度高度都是未知的，裡面的子容器大小也是不一定的</title> <style type="text/css"> .parent{ background: #bebebe; height: 300px; width: 700px; /* 水平置中*/ text-align: center; /* 垂直置中*/ display: table-cell; vertical-align: middle; } .child{ background: #404040; height: 50px; width: 50px; color:white; /* 水平置中 */ display: inline-block; } </style></head><body><!--這個方案的優點：1。相容性比較高。--><div class="parent"> <div class="child">DEMO</div></div></body></html>
方案二
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>水平置中和垂直置中 absolute_transform</title> <style type="text/css"> .parent{ background: #bebebe; height: 400px; width: 600px; position: relative; } .child{ background: #404040; height: 50px; color: white; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } </style></head><body><div class="parent"> <div class="child">DEMO</div></div></body></html>
方案三
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>水平置中和垂直置中flex_justify-content_align-items</title> <style type="text/css"> .parent{ background: #bebebe; height: 400px; width: 600px; display: flex; justify-content: center; align-items: center; } .child{ background: #404040; color: white; } </style></head><body><div class="parent"> <div class="child"><H1>DEMO</H1></div></div></body><!--缺點： 相容性是個問題。--></html>
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
