居中的问题

Question

<div> <p>这是文字<p> </div> div{positon:relative;width:200px;height:200px}想让p距离div底部20px;p使用了position:absolute;bottom:20px;定位后p不能水平居中，好像p必须设置width才能行，p是文字无法知道宽度，该怎么居中

Answer 1

不用 position:absolute;

直接在div上 padding-bottom: 20px; 或者，在p:last-child 上 margin-bottom: 20px;

Answer 2

*{border:1px solid red}/*框只是为了看起来直观*/
div{position:relative;width:200px;height:200px;text-align:center;}
p{position:absolute;bottom:20px;width:100%;}

另外：不是非常必要话，个人很不推荐绝对定位

Answer 3

用了position:absolute 之后，即使你设置了宽度，margin: 0 auto 也不会居中的，可以用text-align:center，来实现居中，（少用position属性）

Answer 4

p是块状元素，宽度自适应父元素的宽度，即100% ， 此时若要居中，可给p元素添加属性

p{text-align:center;}