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

2020年更新：

除非需要使它在早期的浏览器（例如Internet Explorer 10）上运行，否则可以使用flexbox。当前所有主流浏览器都广泛支持它。基本上，需要将容器指定为flex容器，并以其主轴和横轴为中心：

#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容器及其直接子元素之间工作的方式。

还有另一种进行居中的方法：通过不指定centerflex容器在主轴和交叉轴上的分布，而是margin: auto在flex项上指定以占用所有四个方向上的所有额外空间，并均匀分布边距将使flex项在所有方向上居中。除有多个弹性项目外，此方法均有效。此外，此技术在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/设置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在子元素上设置一个值，该值等于父元素的固定高度。

  尽管此解决方案在某些情况下可以使用，但值得注意的是，当有多行文本（例如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类提供给目标<div>：

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

您可以flex在父 项上使用该属性，div并将该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>

<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

# 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
}

这对我有用（测试确定！）：

HTML：

<div class="mydiv">
    <p>Item to be centered!</p>
</div>

CSS：

.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}

您可以选择50％以外的其他值。例如，以25％居中于父级的25％。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv {
        height: 450px;
        background: #f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <h1>Title</h1>
    </div>
  </body>
</html>

您可以尝试以下方法：

1. 如果您只有一个单词或一个单行句子，那么以下代码可以解决问题。

   在div标签内添加文本，并为其指定ID。为该ID定义以下属性。

   id-name {
     height: 90px;
     line-height: 90px;
     text-align: center;
     border: 2px dashed red;
   }

   注意：确保line-height属性与分隔的高度相同。

   图片

   但是，如果内容不止一个单词或一行，那么这将不起作用。另外，有时您无法指定像素大小（以px或％为单位）（当分隔的确很小且您希望内容恰好在中间时）。

2. 要解决此问题，我们可以尝试以下属性组合。

   id-name {
     display: flex;
     justify-content: center;
     align-items: center;
     border: 2px dashed red;
   }

   图片

   这三行代码将内容准确地设置在一个分区的中间（与显示大小无关）。在“对齐项：中心”帮助垂直居中，而“证明内容：中心”将使其水平居中。

   注意： Flex不适用于所有浏览器。确保为其他浏览器支持添加适当的供应商前缀。

网格

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.box {
    width: 200px;
    height: 100px;
    background: red;
}

<div class="box center">My text</div>

调整线高以获得垂直对齐。

line-height: 90px;

这应该是正确的答案。最干净，最简单：

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

套用样式：

position: absolute;
top: 50%;
left: 0;
right: 0;

您的文本将居中，而不考虑其长度。

这为我工作：

.center-stuff{
    text-align: center;
    vertical-align: middle;
    line-height: 230px; /* This should be the div height */
}

对我来说，这是最好的解决方案：

HTML：

 <div id="outer">  
     <img src="logo.png">
 </div>

CSS：

#outer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html> 

非常简单的代码对我有用！仅一行，您的文本将水平居中。

.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>

输出看起来像这样：

如果它的作用只是为了节省开发人员寻找简单解决方案的时间，请对此答案进行投票。谢谢！:)

请尝试以下示例。我为每个类别添加了示例：水平和垂直

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html>