有很多种方法可以实现这里我用两种方法来实现，一个是vertical-align，另一个是align-items
具体实现如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
div{
display:table;
height:200px;
}
div p,div span{
display:table-cell;
vertical-align:middle;
}
div{
display:flex;
height:200px;
align-items:center;
}
</style>
</head>
<body>
<div>
<p>
单行多行都垂直居中
</p>
</div>
<div>
<p>
单行多行都垂直居中单行多行都垂直居中单行多行都垂直居中单行多行都垂直居中单行多行都垂直居中单行多行都垂直居中单行多行都垂直居中单行多行都垂直居中单行多行都垂直居中单行多行都垂直居中单行多行都垂直居中单行多行都垂直居中居中单行多行都垂直居中居中单行多行都垂直居中居中单行多行都垂直居中居中单行多行都垂直居中
</p>
</div>
<div>
<p>
单行多行都垂直居中
</p>
</div>
<div>
<span>
单行多行都垂直居中单行多行都垂直居中单行多行都垂直居中单行多行都垂直居中单行多行都垂直居中单行多行都垂直居中单行多行都垂直居中单行多行都垂直居中单行多行都垂直居中单行多行都垂直居中单行多行都垂直居中单行多行都垂直居中居中单行多行都垂直居中 居中单行多行都垂直居中 居中单行多行都垂直居中 居中单行多行都垂直居中单行多行都垂直居中单行多行都垂直居
</span>
</div>
</body>
</html>先说vertical-align这种方法，多行也居中用vertical-align，这个属性的话需要相对于父元素去居中 所以父元素也设置了display:table;写这个的时候 就是缩进的这个，这个是有两个span元素 高度不一样 所以直接设置vertical-align这个属性就可以了（博客中的第三篇） ，但是这里只有一个元素的时候就需要给父元素设置一个display：table相对于父元素去居中。这个兼容性比较好
然后是align-items这个属性是弹性布局中的，只要高版本的浏览器比较支持，兼容性比较差。
478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
