div 块内的 CSS 中心文本(水平和垂直)

我将div设置为display:blockheightwidth 90px ),并且里面有一些文本。

我需要文本在垂直和水平方向的中心对齐。

我尝试了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 ... 我通常使用带有单个单元格的表来实现它... 使其尽可能简单。


2020 年更新:

除非需要使用旧代码,否则可以使用 flexbox。 当前所有主流浏览器广泛支持它。基本上,需要将容器指定为弹性容器,并沿其主轴和横轴居中:

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

为孩子指定一个固定的宽度,这称为 “弹性项目”:

#content {
  flex: 0 0 120px;
}

示例: http//jsfiddle.net/2woqsef1/1/

要收缩包装内容,它甚至更简单:只需从 flex 项中删除flex: ...行,它就会自动收缩包装。

示例: http//jsfiddle.net/2woqsef1/2/

上面的示例已经在包括 MS Edge 和 Internet Explorer 11 在内的主要浏览器上进行了测试。

如果需要自定义一个技术说明:在 flex 项内部,因为该 flex 项本身不是 flex 容器,所以旧的非 flexbox CSS 方式可以按预期工作。但是,如果向当前的伸缩容器中添加其他伸缩项目,则两个伸缩项目将被水平放置。要使其垂直放置,请添加flex-direction: column;到 flex 容器。这是它在 flex 容器及其直接子元素之间工作的方式。

还有一种技术是不为 flex 容器在主轴和交叉轴上指定分布center ,而是指定margin: auto在 flex 项上margin: auto占据所有四个方向上的所有多余空间,以使 margin 均匀地居中弹性项目。除存在多个弹性项目外,此方法均有效。此外,此技术在 MS Edge 上有效,但在 Internet Explorer 11 上无效。


2016 年 / 2017 年更新:

它通常可以通过transform来完成,即使在较旧的浏览器(例如 Internet Explorer 10 和 Internet Explorer 11)中也可以很好地工作。它可以支持多行文本:

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/

如果需要对 Internet Explorer 10 的支持,则 flexbox 将不起作用,并且上述方法和line-height方法将起作用。否则,flexbox 会完成这项工作。

截至 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进行垂直居中, justify-content: center进行水平居中。只是不要忘记为其他浏览器支持添加供应商前缀( 请参阅示例 )。

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

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

    此处示例 / 全屏示例

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

    对于垂直对齐,将父元素的width / height100%然后添加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值设置为等于父元素的固定高度。

    尽管此解决方案在某些情况下可以使用,但值得注意的是,当有多行文本( 例如 this)时,该解决方案将无法使用。

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

方法 4 和 5 并不是最可靠的。选择前三个之一。

使用 flexbox / CSS:

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

CSS:

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

摘自快速提示:垂直和水平居中对齐元素的最简单方法

添加行display: table-cell;到该 div 的 CSS 内容。

只有表格单元格支持vertical-align: middle; ,但您可以将 [table-cell] 定义赋予 div ...

一个实时示例在这里: http : //jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; // This says treat this element like a table cell
    vertical-align:middle; // Now we can center vertically like in a TD
}

我始终对容器使用以下 CSS,以使其内容水平和垂直居中。

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

在此处查看其运行情况: https : //jsfiddle.net/yp1gusn7/

您可以为此尝试非常简单的代码:

display: flex;
  align-items: center;
  justify-content: center;

.box{
  height: 90px;
  width: 90px;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="box">
  Lorem
</div>

Codepen 链接: http ://codepen.io/santoshkhalse/pen/xRmZwr

将此 CSS 类提供给目标

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* Not necessary just to see the result clearly */
}
<div class="centered">This text is centered horizontally and vertically</div>

您可以在 div处使用flex属性,并将margin:auto属性添加到子项:

.parent {
    display: flex;
    /* You can change this to `row` if you want the items side by side instead of stacked */
    flex-direction: column;
}

/* Change the `p` tag to what your items child items are */
.parent p {
    margin: auto;
}

您可以在此处查看flex更多选项: https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

方法 1

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello, World!!
</div>

方法 2

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

方法 3

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

# Parent
{
  display:table;
}

# Child
{
  display: table-cell;
  width: 100%; // As large as its parent to center the text horizontally
  text-align: center;
  vertical-align: middle; // Vertically align this element on its parent
}