CSS中經常會用到元素居中，那麼今天我為大家分享幾種水平居中的方法，下麵代碼都可以達到同樣的居中效果，來不及解釋了，快上馬（碼）： 一、margin : 0 auto; 此種方法適用於塊級標簽在父級塊標簽內使用； 註意事項：父級標簽必須是塊級標簽。如果父級不設寬度，body 內一級元素預設為瀏覽器寬 ...
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%，需要向左移動寬度一半的距離。
