css实现水平居中和垂直居中的常见方式

水平居中：

行内元素：text-align:center；//这个比较简单块状元素：定宽的块状元素通过设置左右margin为auto实现，例如margin：10px auto；不定宽的块状元素：加入 table 标签后按照定宽元素进行设置；设置 display: inline 后按照行内元素设置；设置position:relative left:50% 通过给父元素设置 float，然后给父元素设置position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

垂直居中：
例子1.
对于单行文本最简单的垂直居中就是利用line-height，首先，定义整个p的高度，然后再设置line height 的值等于p高度，这样就实现了单行文本的居中效果。
例子2.

对于图片垂直居中可以利用css的vertical-align:middle实现:

#parent{line-height:200px;}
#parentimg{vertical-align:middle;}

例子3.整个p 居中

Contenthere

让id为child的p 居中实现代码：

#parent{display:table;}
#child{
display:table-cell;
vertical-align:middle;
}//display:table-cell;IE8以下不支持。
IE8以下的浏览器可以使用#child{
display:inline-block;
}

例子4.针对p块级元素，可以使用下面的方法实现垂直居中

HTML:
Contenthere

css：
#parent{
position:relative;}
#child{
positon:absolute;
top:50%;
left:50%;
height:30%;
width:50%;
margin:-15%00-25%;
}

设置父级position为relative；子元素postion为absolute；同时设置子元素的top为50%，水平也想居中的话，就设置left为50%