小开

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

只有表单元格支持vertical-align: middle;，但您可以将[table-cell]定义提供给div…

div{height: 90px;width: 90px;text-align: center;border: 1px solid silver;display: table-cell; // This says treat this element like a table cellvertical-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。它是被所有主流浏览器广泛支持。基本上，容器需要指定为flex容器，并沿其主轴和十字轴居中：

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

要为子级指定固定宽度，称为“flex项”：

#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容器，因此CSS的旧非flexbox方式按预期工作。但是，如果您向当前flex容器添加额外的flex项目，则这两个flex项目将水平放置。要使它们垂直放置，请将flex-direction: column;添加到flex容器中。这就是它在flex容器及其立即子元素之间的工作方式。

还有一种替代的居中方法：不为flex容器的主轴和十字轴上的分布指定center，而是在flex项目上指定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会完成这项工作。

小开

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

line-height: 90px;

小开

截至2014年的常用技术：

方法1-transformtranslateX/translateY：

这里的例子/全屏示例

在支持的浏览器（大多数）中，您可以将top: 50%/left: 50%与translateX(-50%) translateY(-50%)组合使用，以动态地垂直/水平居中元素。
```
.container {position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);}
```

Approach 2 - Flexbox method:

Example Here / Full Screen Example

In supported browsers, set the display of the targeted element to flex and use align-items: center for vertical centering and justify-content: center for horizontal centering. Just don't forget to add vendor prefixes for additional browser support (see example).
```
html, body, .container {height: 100%;}.container {display: flex;align-items: center;justify-content: center;}
```

Approach 3 - table-cell/vertical-align: middle:

Example Here / Full Screen Example

In some cases, you will need to ensure that the html/body element's height is set to 100%.

For vertical alignment, set the parent element's width/height to 100% and add display: table. Then for the child element, change the display to table-cell and add vertical-align: middle.

For horizontal centering, you could either add text-align: center to center the text and any other inline children elements. Alternatively, you could use margin: 0 auto assuming the element is block level.
```
html, body {height: 100%;}.parent {width: 100%;height: 100%;display: table;text-align: center;}.parent > .child {display: table-cell;vertical-align: middle;}
```

Approach 4 - Absolutely positioned 50% from the top with displacement:

Example Here / Full Screen Example

This approach assumes that the text has a known height - in this instance, 18px. Just absolutely position the element 50% from the top, relative to the parent element. Use a negative margin-top value that is half of the element's known height, in this case - -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;}
```

Approach 5 - The line-height method (Least flexible - not suggested):

Example Here

In some cases, the parent element will have a fixed height. For vertical centering, all you have to do is set a line-height value on the child element equal to the fixed height of the parent element.

Though this solution will work in some cases, it's worth noting that it won't work when there are multiple lines of text - like this.
```
.parent {height: 200px;width: 400px;text-align: center;}.parent > .child {line-height: 200px;}
```

Methods 4 and 5 aren't the most reliable. Go with one of the first 3.

小开

# Parent{display:table;}
# Child{display: table-cell;width: 100%; // As large as its parent to center the text horizontallytext-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>

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

小开

这对我有用（测试OK！）：

超文本标记语言：

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

代码链接：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>

小开

您可以尝试以下方法：

如果你只有一个单词或一行句子，那么下面的代码可以做到这一点。

在div标记中包含一个文本并为其提供一个id。为该id定义以下属性。
```
id-name {height: 90px;line-height: 90px;text-align: center;border: 2px dashed red;}
```
备注：确保line-高度属性与除法的高度相同。

图片

但是，如果内容超过一个单词或一行，那么这将不起作用。此外，有时您无法以px或%指定除法的大小（当除法非常小并且您希望内容正好在中间时）。
要解决这个问题，我们可以尝试以下属性组合。
```
id-name {display: flex;justify-content: center;align-items: center;border: 2px dashed red;}
```
图片

这3行代码将内容设置在分割的中间（与显示的大小无关）。"对齐项：居中"有助于垂直居中，而返回值："cent-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类提供给目标

：

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

小开

您可以在父母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/

小开

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

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

小开

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

超文本标记语言：

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

输出看起来像这样：

小开

GRID

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

如何在div块内居中文本（水平和垂直）？

2020年更新：

2016/2017年更新：

收缩包装宽度：

截至2014年的常用技术：

方法1-`transformtranslateX`/`translateY`：

Approach 2 - Flexbox method:

Approach 3 - `table-cell`/`vertical-align: middle`:

Approach 4 - Absolutely positioned `50%` from the top with displacement:

Approach 5 - The `line-height` method (Least flexible - not suggested):

办法1

办法2

办法3

GRID

如何在div块内居中文本（水平和垂直）？

2020年更新：

2016/2017年更新：

收缩包装宽度：

截至2014年的常用技术：

方法1-transformtranslateX/translateY：

Approach 2 - Flexbox method:

Approach 3 - table-cell/vertical-align: middle:

Approach 4 - Absolutely positioned 50% from the top with displacement:

Approach 5 - The line-height method (Least flexible - not suggested):

办法1

办法2

办法3

GRID

方法1-`transformtranslateX`/`translateY`：

Approach 3 - `table-cell`/`vertical-align: middle`:

Approach 4 - Absolutely positioned `50%` from the top with displacement:

Approach 5 - The `line-height` method (Least flexible - not suggested):