Html 100%高度div中的文本垂直居中？_Html_Css_Centering

Html 100%高度div中的文本垂直居中？

html css

Html 100%高度div中的文本垂直居中？,html,css,centering,Html,Css,Centering,我使用的div是父div高度的100% div只包含一行文本 div不能有固定的高度所以我的问题是如何使文本行垂直居中我试过使用： display: table-cell; line-height:200%; 如果重要的话，div绝对处于正确位置当前CSS .requests { position: absolute; right: 0; height: 100%; width: 50px; padding: 0 10px; bac

我使用的div是父div高度的100%

div只包含一行文本

div不能有固定的高度

所以我的问题是

如何使文本行垂直居中

我试过使用：

display: table-cell;  
line-height:200%;

如果重要的话，div绝对处于正确位置

当前CSS

.requests {
    position: absolute;
    right: 0;
    height: 100%;
    width: 50px;
    padding: 0 10px;
    background-color: #69A4B5;
    display: table-cell;
    vertical-align: middle;
    border-bottom-right-radius: 5px;
}

你试过线高1米吗；？我记得那是使它垂直居中的方法

您是否尝试过垂直对齐：中间

您可以在此处找到有关垂直对齐的更多信息：

最好、最简单的方法是使用flexbox:

.parent-selector {
    display: flex;
    align-items: center;
}

就是这样：D

查看此工作示例：

div{
边框：1px纯红；
高度：150像素；
宽度：350px；
证明内容：中心；
/*实际代码*/
显示器：flex；
对齐项目：居中；
}


你好

垂直对齐，动态高度与绝对位置相结合，除了一些特殊情况，如果没有几行JS（例如jQuery），就不可能实现。（在某些情况下，可以使用后端代码解决，或者使用合理的顶部或边距样式组合最小高度，但并不完美）

我通常只使用绝对位置，当某个东西应该相对于浮动中的其他东西“弹出”时，我认为这是使用它的最佳方式，这样你就不必处理这样的事情

无意冒犯，但这里的大多数答案都有偏差。

因为它是绝对定位的，所以您可以使用top:50%将其垂直对准中心

但随后你会遇到一个问题，页面比你想要的要大。为此，您可以为父div使用overflow:hidden。这是我用来创建相同效果的：

CSS：

div.parent {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
}
div.parent div.absolute {
    position: absolute;
    top: 50%;
    height: 300px;
}

HTML：

<div class="parent">
    <div class="absolute">This is vertically center aligned</div>
</div>


这是垂直居中对齐的

如果您知道文本的高度，可以使用

顶部：50%

和

页边距顶部：-x px

的组合，其中x是文本高度的一半

工作示例：

只需用如下表格包装您的内容：

  <table width="100%" height="100%">
         <tr align="center">
               <th align="center">
                 text
               </th>
          </tr>
  </table><


文本
<

我不同意，这里有一个JS免费解决方案，它可以工作：

<html style="height: 100%;">
    <body style="vertical-align: middle; margin: 0px; height: 100%;">
        <div style="height: 100%; width: 100%; display: table; background-color: #ccc;">
            <div style="display: table-cell; width: 100%; vertical-align: middle;">
                <div style="height: 300px; width: 600px; background-color: wheat; margin-left: auto; margin-right: auto;">A</div>
            </div>
        </div>
    </body>
</html>

A.

这个答案不再是最佳答案。。。请参见下面的flexbox答案

要使其完全居中（如中所述），您需要添加负上边距。如果您知道（或强制）只有一行文字，可以使用：

余量顶部：-0.5em
例如：

//CSS:
html，body，div{
身高：100%；
}
#母公司
{
位置：相对位置；
边框：1px纯黑；
}
#孩子
{
位置：绝对位置；
最高：50%；
/*将加满调整为单行高度的一半*/
边缘顶部：-0.5em；
/*强制内容始终为单行*/
溢出：隐藏；
空白：nowrap；
宽度：100%；
文本溢出：省略号；
}
//HTML:
假定居中的文本


最初接受的答案不会垂直居中于文本中间（它以文本顶部为中心）。因此，如果您的家长不是很高，它看起来根本不会居中，例如：

//CSS:
#母公司
{
位置：相对位置；
高度：3em；
边框：1px纯黑；
}
#孩子
{
位置：绝对位置；
最高：50%；
} 
//HTML:
假定居中的文本

将行高设置为与div的高度相同将导致文本居中。只有当有一行时才有效。（例如按钮）。试试这个
它对我很管用，


css
还有html



你好，我在中间
尽管这个问题已经很老了，但这里有一个解决方案，可以处理需要垂直居中的单行和多行（可以很容易地垂直和水平居中，如中的css所示）
HTML
现代解决方案-适用于所有浏览器和IE9+
-浏览器支持
.v-center {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

示例：
JavaScript/jQuery是一个选项吗？如果绝对没有纯css选项，那么是的。虽然我不喜欢。可能的重复我怀疑您可以删除溢出：隐藏，如果您从绝对div中删除高度：300px。您可以，但绝对定位div不是父div的100%高度。我我想，这就是作者所做的。@sarcastyx我尝试过用浮动元素和位置：relative来解决问题，但它只是将内容推到了底部！而且，由于隐藏的溢出，部分内容消失了。有什么想法吗？@Snowbell92，这个答案更适合OP问题中的场景。如果你能给我更多的建议知道你在尝试什么或者你有什么，那么我可以给你一个更好的答案。@sarcastyx我应该发布一个新问题吗？我正在尝试这样做：我有一个三列布局，列是浮动的，我想要一个块（实际上是徽标）垂直居中于div内。div也有100%的高度。谢谢你的帮助。是的，这取决于布局。也许最好的选择是使用position:absolute将包装设置为position:relative，并使用position:absolute将形状设置为position:position，正如sarcastyx所说的那样。然后你必须使用边距来最终正确对齐它。还有另一种解决方案n：使用垂直对齐：中间带行高。但是这个解决方案更适用于文本行和类似的东西…它只适用于固定高度，如果我设置100%高度，块不会反应。尝试将父级设置为display:table。其他解决方案都不适用于ionic。但这非常有效！+1+1回答得好。如果您的JSFIDLE是相当简洁、考虑周到
//CSS:
#parent
{
    position:relative;
    height: 3em;
    border: 1px solid black;
}

#child
{
    position: absolute;
    top: 50%;
} 

//HTML:
<div id="parent">
    <div id="child">Text that is suppose to be centered</div>
</div>

.table {
    width:100%;
    height:100%;
    position:absolute;
    display:table;
}
.cell {
    display:table-cell;
    vertical-align:middle;
    width:100%;
    height:100%:
}

<div class="table">
    <div class="cell">Hello, I'm in the middle</div>
</div>

<div class="parent">
    <div class="child">Text that needs to be vertically centered</div>
</div>

.parent {
    position: relative;
    height: 400px;
}

.child {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.v-center {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}