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%，需要向左移动宽度一半的距离。