如何将文本保存在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>

我试图让一个Class包含带有"margin-top和margin-bottom"的文本都在auto上,但是不起作用.

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;

.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。