css居中的实现方法(包括水平居中和垂直居中)

1.有这样一段代码：

	<p>您在<img src="images/querenzhifu.png">后会指引去支付宝，按照支付宝的提示完成付款操作。</p>

这样在一个块级元素下，实现img的居中，我们不能直接给绝对定位去实现它，因为绝对定位会产生图片覆盖文字的效果，那么这时怎样进行居中呢，

方法很简单，不需要对p标签设置宽高或是其他的什么，只需给img一个vertical-align:middle,就可以实现图片与文字的一个居中了。

一.内联元素的居中方法，如下：

水平居中：

1.行内元素，直接设置text:align：center

2.Flex布局，设置display:flex; justify-content:center;该方法呢，有些浏览器不支持。

垂直居中：

1.父元素高度确定的单行文本或行内元素，设置height = line-height;

2.父元素高度确定的多行文本或行内元素

a:插入table，然后设置vertical-align:middle;

b:先设置display:table-cell，再设置vertical-align:middle;

二.块级元素的居中方法，如下：

水平居中：

1.定宽块级元素，设置margin:0 auto;

2.不定宽块级元素，

a:在元素外加入table标签（完整的table，包括table,tbody,tr,td），该元素写在td内，然后设置margin的值为auto；

b:给该元素设置display:inline;

c:给该元素设置position:relative;left:50%;

垂直居中：

1.使用position:absolute(fixed)，设置left、top、margin-left、margin-top的属性；

2.利用display:table-cell属性；

3.使用css3的新属性transform:translate(x,y)，x和y是相对x轴和y轴移动，可以给负值；

4.使用:before，在元素前插入...;

好了，本篇就到这里了。