CSS如何將元素垂直居中方法錦集
阿新 • • 發佈：2018-12-18
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>實現元素垂直居中</title> <style> .box{ background-color: pink; overflow: hidden; margin-bottom: 30px; } .text{ background-color: #aaa; margin: 100px auto; } .box2 input{ margin: 30px 0; } .box3 a{ line-height: 100px; } .box4{ height: 500px; position: relative; } .box4 span{ display: inline-block; width: 200px; height: 200px; background-color: #eee; position: absolute; top: 50%; margin-top: -100px; } </style> </head> <body> <b>方法一：</b>針對塊級元素在塊級元素裡垂直居中比較容易，父級元素不設定高度，設定overflow: hidden;（記得！！）子元素也就是需要居中的這位，margin值上下設定成一樣的。 <div class="box box1"> <div class="text">塊級元素</div> </div> 針對行內塊級元素在塊級元素裡垂直居中同上 <div class="box box2"> <input type="text"> </div> <b>方法二：</b>針對行級元素在塊級元素裡垂直居中。上述方法不好使，我這裡採用行高的形式line-height: 100px; <div class="box box3"> <a href="" title="">a標籤</a> </div> <b>方法三：</b>有定位（absolute）的元素可以這樣設: top: 50%;margin-top: -子元素高度一半; <div class="box box4"> <span>有定位</span> </div> </body> </html>
複製貼上瀏覽器執行即可