CSS水平居中的三種方法
阿新 • • 發佈：2018-12-25
CSS中經常會用到元素居中，那麼今天我為大家分享幾種水平居中的方法，下面程式碼都可以達到同樣的居中效果，來不及解釋了，快上馬（碼）：
一、margin : 0 auto;
<head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; background: pink; } p{ width: 50px; height: 50px; background: red; margin: 0 auto; } </style> </head> <body> <div> <p></p> </div> </body>
此種方法適用於塊級標籤在父級塊標籤內使用；
注意事項：父級標籤必須是塊級標籤。如果父級不設寬度，body 內一級元素預設為瀏覽器寬度。
二、position+margin ;
<head> <meta charset="UTF-8"> <title>Title</title> <style> div, p { margin: 0; padding: 0; } div { width: 100px; height: 100px; background:pink; position: relative; } p { width: 50px; height: 50px; background: red; position: absolute; top: 0; left: 25px; } </style> </head> <body> <div> <p></p> </div> </body>
此種方法運用相對定位實現：定位脫離文件流，不佔用寬高；
注意事項：父級元素必須要給相對屬性： Position: relative; 。
三、position+margin （百分比）;
<head> <meta charset="UTF-8"> <title>Title</title> <style> div, p { margin: 0; padding: 0; } div { width: 100px; height: 100px; background: pink; position: relative; } p { width: 50px; height: 50px; background: red; position: absolute; top: 0; left: 50%; margin-left: -25px; } </style> </head> <body> <div> <p></p> </div> </body>
此種方法主要適用於瀏覽器通欄定位；
注意事項：position 定位 left：50%，需要向左移動寬度一半的距離。