div中的CSS中心文本（水平和垂直）

 

我有一个div集来display:block 。 （ 90px height和width ），我有一些文字里面。

我需要将文字垂直和水平对齐在中心。

我已经尝试过text-align:center ，但它没有做水平部分，所以我尝试了vertical-align:middle但是它不起作用。

有任何想法吗？

如果它是一行文字和/或图像，那么很容易做到。 只需使用 

text-align: center;
vertical-align: middle;
line-height: 90px;       /* the same as your div height */

而已。 如果它可以是多行，那么它稍微复杂一些。 但http://pmob.co.uk上有解决方案。寻找“垂直对齐”。

由于他们往往是黑客或添加复杂的div ......我通常使用一个单一的单元格做到这一点...尽可能简单。

2016/2017年更新：

它可以在transform更常用，即使在IE10和IE11等旧版浏览器中也可以正常工作。 它可以支持多行文本： 

position: relative;
top: 50%;
transform: translateY(-50%);

例如：https：//jsfiddle.net/wb8u02kL/1/

收缩包裹宽度：

上面的解决方案对内容区域使用固定宽度。 要使用收缩包装宽度，请使用 

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

例如：https：//jsfiddle.net/wb8u02kL/2/

我尝试过flexbox，但它没有得到广泛的支持，因为它会在IE的一些老版本IE10中崩溃。

截至2014年的常用技术：

  • 方法1 - transform translateX / translateY ：

    示例在这里 / 全屏幕示例

    在受支持的浏览器（大多数）中，可以使用top: 50% / left: 50%与translateX(-50%) translateY(-50%)结合动态垂直/水平居中元素。 

    .container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

  • 方法2 - Flexbox方法：

    示例在这里 / 全屏幕示例

    在受支持的浏览器中，将目标元素的display设置为flex并使用align-items: center for vertical centering和justify-content: center for horizo​​ntal centering。 不要忘记添加供应商前缀以获得更多浏览器支持（请参阅示例）。 

    html, body, .container {
    height: 100%;
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

  • 方法3 - table-cell / vertical-align: middle ：

    示例在这里 / 全屏幕示例

    在某些情况下，您需要确保html / body元素的高度设置为100% 。

    对于垂直对齐，将父元素的width / height为100%并添加display: table 。 然后，对于子元素，将display更改为table-cell并添加vertical-align: middle 。

    对于水平居中，您可以添加text-align: center来居中文本和任何其他inline子元素。 或者，您可以使用margin: 0 auto假定元素是block级别。 

    html, body {
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}

  • 方法4 - 从排名位置绝对定位50%

    示例在这里 / 全屏幕示例

    这种方法假定文本具有已知的高度 - 在本例中为18px 。 相对于父元素，绝对将元素从顶部放置50% 。 使用元素已知高度的一半的负margin-top值，在此情况下为-9px 。 

    html, body, .container {
    height: 100%;
}
.container {
    position: relative;
    text-align: center;
}
.container > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -9px;
}

  • 方法5 - line-height （最不灵活 - 不建议）：

    示例在这里

    在某些情况下，父元素将具有固定的高度。 对于垂直居中，您所要做的就是在子元素上设置一个等于父元素固定高度的line-height值。

    虽然这种解决方案在某些情况下会起作用，但值得注意的是，当存在多行文本时它不起作用 - 像这样。 

    .parent {
    height: 200px;
    width: 400px;
    text-align: center;
}
.parent > .child {
    line-height: 200px;
}

    • 方法4和5不是最可靠的。 与前3个之一一起去。

    使用flexbox / CSS： 

    <div class="box">
    <p>&#x0D05;</p>
</div>

    CSS： 

    .box{
    display: flex;
    justify-content: center;
    align-items: center;
}

    从快速提示中获取：垂直和水平居中元素的最简单方法

    链接地址: http://www.djcxy.com/p/13225.html

    上一篇: CSS center text (horizontally and vertically) inside a div block

    下一篇: CSS: Align text vertically and horizontally?