本文主要是介绍css垂直居中--img p，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
因为p标签和img居中的方法 我知道的不多 就放到一起了！
1.单行文字的居中很简单 一个text-align:center; line-hegight: 父级div的高度。就OK!
2.关键是多行！当然如果父级高度不定，我们可以文字的标签加个padding 也可以解决，但这不是一个好的方案。
下面父级div固定高度 居中的写法：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.container{width: 400px;height: 400px;border: 1px solid red;text-align: center;display: table-cell;vertical-align: middle;}span{display: inline-block;width: 200px;}</style>
</head>
<body><div class="container"><span>我是多行文字，我是多行文字，我是多行文字，我是多行文字我会居中！</span></div>
</body>
</html>3.原理很简单，就是利用table-cell下面的 vertical-align。
以上是文字居中的方法。
-------------------------------------------------------------------------图片居中--------------------------------------------------------------------------------------
1.与文字居中一样。同样使用的是vertical-align.代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.container{width: 400px;height: 400px;border: 1px solid red;text-align: center;display: table-cell;vertical-align: middle;}img{display: inline-block;width: 200px;}</style>
</head>
<body><div class="container"><img src="1.jpg" alt=""></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片居中</title><style>.box{display: table;float: left;margin: 0 10px;width: 180px;height: 180px;border: 1px solid #333;text-align: center;vertical-align: middle;}.innerBox{display: table-cell;vertical-align: middle;}img{width: 90%;vertical-align: middle;}</style>
</head>
<body><div class="box"><div class="innerBox"><img src="2.jpg" alt=""></div></div>
</body>
</html>3.用背景图片做！利用background-position中有个center属性。可以完美实现居中。当然，别忘了background-repeat: no-repeat;
background-image: url();路径要写在行间
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片居中</title><style>.box{display: table;float: left;margin: 0 10px;width: 200px;height: 200px;border: 1px solid #333;background-repeat: no-repeat;background-position: center;}</style>
</head>
<body><div class="box" style="background-image: url(1.jpg);"></div>
</body>
</html>这篇关于css垂直居中--img p的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
