css设置div在网页中垂直居中
css设置div在网页中垂直居中方法很多，这是本人常用的方法
我们要做一个在网页中垂直水平方向都居中的一个div来作一个如下效果的框
操作方法
- 01
本实例以新文档开始
- 02
先放置一个div，并且设置class名为aa，它的:before需要这些必要css样式： .aa:before{ content:""; display:inline-block; height:100%; width:0;vertical-align: middle; margin-left:-.25em;//这里是为了去除inline-block的空隙的影响 }
- 03
在.aa中放置一个div，并且设置class名为aaa，赋予它必要的css属性： .aa>.aaa{ display:inline-block; vertical-align: middle; }
- 04
以上，我们已经做到了最基本的“垂直居中”的要求 为了美化，接下来做到如下效果
- 05
继续添加样式： html,body{ padding:0; margin:0; height:100%; width:100%; } .aa{ width:100%; height:100%; text-align:center; } .aaa{ width:600px; height:220px; background:#666; color:#fff; font-size:40px; font-family:"Comic Sans MS", cursive; text-align:center; line-height:220px; } 至此，已完成
赞 (0)