bootstrp 垂直居中——模拟表格法display:table效果不行
作者:互联网
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 网页布局 - 菜鸟教程(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#wrapper
{display:table;width:300px;height:300px;background:#000;margin:0 auto;color:red;
}
#cell
{display:table-cell; vertical-align:middle;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="cell">
<p>测试垂直居中效果测试垂直居中效果</p>
<p>测试垂直居中效果测试垂直居中效果</p>
</div>
</div>
</body>
</html>
总结:模拟表格法效果不行
将容器设置为display:table,然后将子元素也就是要垂直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle来实现。
标签:居中,cell,效果,垂直,table,display,bootstrp 来源: https://blog.csdn.net/zhaolulu916/article/details/98474666