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

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

一个活生生的例子在这里：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 */
}

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

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。它受到当前所有主要浏览器的广泛支持。基本上，容器需要指定为柔性容器，并沿其主轴和十字轴居中：

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

要为子项指定固定宽度，称为“弹性项”，请执行以下操作：

#content {
  flex: 0 0 120px;
}

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

要对内容进行收缩包装，则更简单：只需从柔性物品上取下线条，它就会自动收缩包装。flex: ...

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

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

如果你需要自定义它，有一个技术说明：在 flex 项内部，由于这个 flex 项本身不是一个 flex 容器，CSS 的旧非 flexbox 方式按预期工作。但是，如果将其他 flex 项添加到当前 flex 容器中，则这两个 flex 项将水平放置。要使它们垂直放置，请将 添加到 flex 容器中。这就是它在 flex 容器及其直接子元素之间的工作方式。flex-direction: column;

还有另一种居中方法：不指定柔性容器的主轴和十字轴上的分布，而是在柔性项目上指定在所有四个方向上占用所有额外空间，均匀分布的边距将使柔性项目在所有方向上居中。除非有多个 flex 项目，否则这仍然有效。此外，此技术适用于 MS Edge，但不适用于 Internet Explorer 11。centermargin: auto

2016 / 2017更新：

它更常见地可以用 来完成，即使在较旧的浏览器（如 Internet Explorer 10 和 Internet Explorer 11）中也能很好地工作。它可以支持多行文本：transform

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 将不起作用，上面的方法和方法将起作用。否则，flexbox 将完成这项工作。line-height

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

line-height: 90px;

截至 2014 年的常用技术：

• 方法 1 - /：transformtranslateXtranslateY

  示例此处/全屏示例

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

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

• 方法 2 - Flexbox 方法：

  示例此处/全屏示例

  在支持的浏览器中，将目标元素设置为并用于垂直居中和水平居中。只是不要忘记添加供应商前缀以获得额外的浏览器支持（请参阅示例）。displayflexalign-items: centerjustify-content: center

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

• 方法 3 - /：table-cellvertical-align: middle

  示例此处/全屏示例

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

  对于垂直对齐，请将父元素的 / 设置为并添加 .然后，对于子元素，将 to 更改为并添加 .widthheight100%display: tabledisplaytable-cellvertical-align: middle

  对于水平居中，您可以添加文本和任何其他子元素以居中。或者，您可以使用假设元素是水平的。text-align: centerinlinemargin: 0 autoblock

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

• 方法 4 - 从顶部绝对定位，位移：50%

  示例此处/全屏示例

  此方法假定文本具有已知高度 - 在本例中为 .只需从顶部绝对定位元素，相对于父元素即可。使用负值，该值是元素已知高度的一半，在本例中为 - 。18px50%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 个之一。

用：

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

我总是对容器使用以下 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/

使用 flexbox/CSS：

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

The CSS:

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

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

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

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

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

这对我有用（测试正常！

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% 为中心。

您可以尝试非常简单的代码：

  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

<!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;
   }
   

   图像

   这 3 行代码将内容精确地设置在一个分区的中间（无论显示器的大小如何）。“align-items： center”有助于垂直居中，而“justify-content： center”将使其水平居中。

   注意：Flex 并非在所有浏览器中都有效。请确保添加适当的供应商前缀以获得额外的浏览器支持。

应用样式：

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

无论长度如何，您的文本都将居中。

方法 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>

将此 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>

.cell-row {display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center}
.cell {display: table-cell}
.cell-middle {vertical-align: middle}

<div class="cell-row">
  <div class="cell cell-middle">Center</div>
</div>

这对我有用：

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

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello, World!!
</div>

可以使用父项的属性，并将该属性添加到子项：flexdivmargin: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;
}

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

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

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

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

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

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%);
}

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

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

输出如下所示：

网 格

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

2020年之路

.parent{ 
  display: grid;
  place-items: center;
}

在父 div 中添加以下代码

display: grid;
place-items: center;