CSS在固定宽高的div内实现垂直居中的实例详解

时间：2021-05-08

需求案例

案例是这样的，一个外层div,高宽是固定的，但是里面内容不是固定的。很多朋友的做法是头部加一个padding或者margin，这样，里面内容显得貌似是居中了，但是假如内容变化，这样头部的固定padding或者margin，始终不变。造成了垂直方向不会居中！

我们知道，假如下面一个div

CSS Code复制内容到剪贴板
  • <divclass="outer"><divclass="inner">haorooms内部内容</div></div>

    • 样式是这样的

    CSS Code复制内容到剪贴板
  • .outer{text-align:center;vertical-align:middle;width:200px;height:350px;}

    • vertical-align:middle是不管用的,很多朋友就在.inner上面做文章了，和我上面说的，加margin等等！那对于这种情况，有没有更好的解决方案呢？

    解决方法

    思路：加一个cssHack，设置cssHack的line-height等于外层div的高度，就可以使用vertical-align:middle了！

    div如下：

    CSS Code复制内容到剪贴板
  • <divclass="outer">
  • <divclass="inner">haorooms内部内容</div><divclass="v">cssHack</div>
  • </div>

    • 样式如下：

    CSS Code复制内容到剪贴板
  • *{
  • margin:0;
  • padding:0;
  • }
  • .outer{
  • background-color:#ccc;
  • font-size:24px;
  • height:350px;
  • text-align:center;
  • overflow:hidden;
  • width:280px;
  • }
  • .outer.inner,
  • .outer.v{
  • display:inline-block;
  • zoom:1;*display:inline;
  • }
  • .outer.inner{
  • line-height:1.8;
  • padding:04px05px;
  • vertical-align:middle;
  • width:262px;
  • }
  • .outer.v{
  • line-height:350px;
  • text-indent:-9999px;
  • width:1px;
  • }

    • 这样就实现了div内部的垂直居中了！

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章