其他分享
首页 > 其他分享> > bootstrp 垂直居中——模拟表格法display:table效果不行

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