css垂直居中技巧总结

标签：text   css   enter   ext   auto   拖拉   code   isp   lin   

1、Line-height + inline-block

<div class="box box2">
  <div class="content">
    立马来看实际完成的 
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>

h2{
  text-align: center;
}
.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  line-height: 200px;
  text-align: center;
}
.box2 .content{
  display: inline-block;
  height: auto;
  line-height:1;
  width: 400px;
  background: #ccc;
}

css垂直居中技巧总结

标签：text   css   enter   ext   auto   拖拉   code   isp   lin   

原文地址：https://www.cnblogs.com/zhangshengwang/p/9528824.html