demo

Question

在下面的文档中，是否可以将内部div水平居中，或者以其他方式使V和H的文本居中于outer类div？

一些限制（抱歉没有在开始时指定它）： 1.不应指定固定宽度，否则解决方案是微不足道的; 2.没有JavaScript，只有纯CSS和HTML。

<!DOCTYPE html>
<html>
  <head>
    <title>the title</title>
    <style>

        div.outer {
            /* ? */
        }

        div.inner {
            display: table-cell;
            min-height: 100px;
            vertical-align: middle;
        }

    </style>
  </head>
  <body>
    <div class="outer">
        <div class="inner">
            <p>Vertically centered text. How to center it horizontally?</p>
        </div>
    <div>
  </body>
</html>

Answer 1

试试这个：

.outer {
   display: table;
   width: 100%;
}
.inner {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

demo

它不使用JavaScript，也不要求您修复width / height / line-height。

Answer 2

如果是单行文本，您可以使用：

div.inner {
  line-height: 100px;
}

随着浏览器支持的发挥，多行更加棘手。尽管我已经发现使用jQuery来检测div.outer大小＆amp;然后创建垫是最可靠的方法。

$(document).ready(function() {
  var whitespace = $("div.outer").innerHeight() - $("div.inner").innerHeight();
  var padding = Math.round(whitespace / 2);
  $("div.inner").css({
    "padding-top": padding + "px";
  });
});

Answer 3

查看this教程。您需要将line-height和width添加到您的CSS中才能使其正常运行。

Answer 4

在谷歌搜索并搜索了几个小时之后，我终于得到了一个解决方案，可以在另一个div中水平和垂直居中。

        div.parent {
          display: block;
          text-align: center;
          line-height: 300px; /* the height of parent div */
        }
        div.child {
          display: inline-block;
          vertical-align: middle;
        }

它不使用绝对定位，因此您无需修复子宽度/高度。
它不使用display：table / tablecell，某些版本的IE不支持。
这是一个纯CSS解决方案，即使动态加载子div也不需要编写javascript。

希望这可以帮助那些为此而受苦的人。

垂直和水平居中文本

4 个答案:

demo