dev 居中_div居中以及div中的元素居中

p水平和垂直居中，text-align和vertical-align不起作用，因为标签p没有这两个属性，所以再css中设置这两个值不能居中的效果。

1. p水平居中:设置margin的左右边距为自动。

p

{

margin:0 auto;

}

2. p中的元素居中

2.1 p中的文字居中：将p的行高设置跟其高度一样的值。

p

{

height:200px;

line-height:200px;

}

2.2 p中的图片居中,方法一：将p的行高设置跟其高度一样的值，将其中的图片img外套上标签i,设置i和p同时垂直居中

p

{

width: 200px;

height: 200px;

line-height: 200px;

vertical-align: middle;

background-color: Gray;

}

p i

{

vertical-align: middle;

}

2.3 p中的图片居中,方法二：将p转换成tablecell,让后设置vertical-align属性居中。

p

{

width: 200px;

height: 200px;

display: table-cell;

vertical-align: middle;

background-color: Gray;

}