利用css进行元素的水平居中，行级元素设置其父元素的text-align center，块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法，一起看看吧！
line-height method
试用：单行文本垂直居中，demo
代码：
html
<p id="parent">    <p id="child">text here</p></p>
css
#child {    line-height: 200px;}
垂直居中一张图片，代码如下
html
<p id="parent">    <img src="image.png" alt="" /></p>
css
#parent {    line-height: 200px;}#parent img {    vertical-align: middle;}
css table method
适用：通用，demo
代码：
html
<p id="parent">    <p id="child">content here</p></p>



css
#parent {display: table;}#child {    display: table-cell;    vertical-align: middle;}
低版本 ie fix bug：
#child {    display: inline-block;}
absolute positioning and negative margin
适用：块级元素，demo
代码：
html
<p id="parent">    <p id="child">content here</p></p>



css
#parent {position: relative;}#child {    position: absolute;    top: 50%;    left: 50%;    height: 30%;    width: 50%;    margin: -15% 0 0 -25%;}
absolute positioning and stretching
适用：通用，但在ie版本低于7时不能正常工作，demo
代码：
html
<p id="parent">    <p id="child">content here</p></p>



css
#parent {position: relative;}#child {    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    width: 50%;    height: 30%;    margin: auto;}
equal top and bottom padding
适用：通用，demo
代码：
html
<p id="parent">    <p id="child">content here</p></p>



css
#parent {    padding: 5% 0;}#child {    padding: 10% 0;}
floater p
适用：通用，demo
代码：
html
<p id="parent">    <p id="floater"></p>    <p id="child">content here</p></p>
css
#parent {height: 250px;}#floater {    float: left;    height: 50%;    width: 100%;    margin-bottom: -50px;}#child {    clear: both;    height: 100px;}
以上就是六种方法，可以在实际的使用过程中合理选择.
更多编程相关知识，请访问：编程入门！！