flex實現水平垂直居中
適用場景：父子寬高都可未知(比較推薦這種方式，簡單，而且目前兼容性也不錯。)
<html> <head> <style> .parent { width: 100%; height: 100px; background: cyan; display: flex; justify-content: center; align-items: center; } .son { width: 20%; height: 20%; background: pink; } </style> </head> <body> <div class='parent'> <div class='son'></div> </div> </body></html>絕對定位加上負margin
適用場景：父元素寬高已知未知都行，但是首先得有寬高。其次子元素的寬高必須已知，因為需要設置子元素的負margin. (也可以將負margin設置成translate來做位移實現)
<html> <head> <style> .parent { position: relative; width: 200px; height: 200px; background: pink; } .son { position: absolute; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; width: 50px; height: 50px; background: yellow; } </style> </head> <body> <div class='parent'> <div class='son'></div> </div> </body></html>絕對定位 + auto margin
適用場景：父子元素寬高都未知的情況(該方式不需要明確知道子元素寬高，子元素寬高可用百分比，對于子元素寬高不確定需要居中的情況比較適合。)
<html> <head> <style> .parent { position: relative; width: 200px; height: 200px; background: cyan; } .son { position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; width: 10%; height: 10%; background: yellow; } </style> </head> <body> <div class='parent'> <div class='son'></div> </div> </body></html>網格布局
適用場景：父子元素寬高未知，兼容性不大好
<html> <head> <style> .parent { display: grid; } .son { jusitify-self: center; align-self: center; } </style> </head> <body> <div class='parent'> <div class='son'></div> </div> </body></html>Table-cell + text-align + vertical-align
適用場景: 父元素大小已知（非百分比高度），子元素大小未知，但子元素須為行內塊元素，較好的兼容性
<html> <head> <style> .parent { display: table-cell; vertical-align: middle; text-align: center; width: 100vw; height: 90vh; background-color: yellowgreen; } .son { display: inline-block; width: 200px; height: 200px; background-color: Indigo; } </style> </head> <body> <div class='parent'> <div class='son'></div> </div> </body></html>偽元素
適用場景：父子寬高都可未知，子元素需為行內塊元素(這種方式其實就是使用偽元素的高度為100%，子元素和偽元素都設置 vertical-align: middle實現垂直居中的效果)
<html> <head> <style> .parent { height: 100vh; width: 100vw; text-align: center; background: #c0c0c0; } .parent:before { content: "/200B"; display: inline-block; height: 100%; vertical-align: middle; } .son { display: inline-block; vertical-align: middle; width: 200px; height: 200px; padding: 10px 15px; background: #f5f5f5; } </style> </head> <body> <div class="parent"> <div class="son"></div> </div> </body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
