演示地址：點我
1、完美居中：絕對定位 + transform，適用于元素寬高未知的大多數情況
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .parent { position: relative; height: 300px; width: 300px; background: #ddd;; } .child { position: absolute; height: 100px; width: 100px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #333; } </style></head><body> <div class="parent"> <div class="child"></div> </div></body></html>2、完美居中：flex布局，需要兼容flex
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .parent { display: flex; justify-content: center; align-items: center; height: 300px; width: 300px; background: #ddd; } .child { height: 100px; width: 100px; background: #333; } </style></head><body> <div class="parent"> <div class="child"></div> </div></body></html>3、內聯元素水平居中：text-align，適用于常規文檔流中的內聯元素（span、a、input等），也包括inline-block元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .parent { text-align: center; height: 300px; width: 300px; background: #ddd; } .child { height: 50px; width: 100px; background: #aaa; } </style></head><body> <div class="parent"> <span class="child">span</span><br> <input type="text" class="child" value="input"><br> <div class="child" style="display: inline-block;">inline-block</div><br> </div></body></html>新聞熱點
疑難解答
