如何将文本保留在 div 中，始终位于中间？

Question

我试图让文本停留在可调整大小的 DIV 的中间。 这是示例：

CSS

#rightmenu {
  position: absolute;
  z-index: 999999;
  right: 0;
  height: 60%;
  text-align: center;
}

HTML

<div id="rightmenu">This text should be center aligned and in the middle of the resizable rightmenu</div>

我试图让一个类在自动上包含带有“margin-top 和 margin-bottom”的文本，但不起作用。

Answer 1

如果你不关心 IE7 支持，你可以这样做：

HTML：

<div id=wrap>
  <div id=inside>
    Content, content, content.
  </div> 
</div>

CSS：

#wrap {
    /* Your styling. */
    position: absolute;
    z-index: 999999;
    right: 0;
    height: 60%;
    text-align: center;

    /* Solution part I. */
    display: table;
}

/* Solution part II. */
#inside {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

代码： http : //tinkerbin.com/ETMVplub

如果你对 JavaScript 没问题，你可以试试这个 jQuery 插件： http : //centratissimo.musings.it/但因为它似乎也不支持 IE7，所以 CSS 解决方案可能更好。

Answer 2

Flexbox通过以流畅的方式对齐元素确实改变了游戏规则。 将您的容器元素定义为display: flex然后对齐您的内部孩子，您将使用justify-content: center; align-items: center; justify-content: center; align-items: center;

.container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.parent {
    height: 500px;
    width: 500px;
    position: relative;
}


<div class="parent">
    <div class="container">
        <p>Hello</p>
        <p>World</p>
    </div>
</div>

您会注意到“Hello”和“World”都将在.container元素中垂直和水平居中。

Answer 3

替换height: 60%; 带padding: 30% 0; .

Answer 4

如果您希望文本在 div 中水平居中，'text-align:center;' 是你的朋友。 如果你想让它垂直居中； 将内容包裹在内部 div 中，然后为该内部 div 使用 'margin: auto'。 当然，你必须给内部 div 一个宽度； 否则，水平中心将不起作用。
如果表格是一个选项，'valign="middle"' 也适用于表格（否则不鼓励）

Answer 5

检查是否需要这样做：

<html>

<head>
  <style type="text/css">
    div {
      height: 100px;
      width: 100px;
      background: #ccc;
      text-align: center;
    }

    p {
      line-height: 100px;
    }

  </style>
</head>

<body>
  <div>
    <p>centered</p>
  </div>
</body>

</html>