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

Question

提问by Satch3000

I have a divset to display:block(90pxheightand width), and I have some text inside.

我有一个div设置为display:block(90pxheight和width)，里面有一些文本。

I need the text to be aligned in the center both vertically and horizontally.

我需要将文本垂直和水平居中对齐。

I have tried text-align:center, but it doesn't do the horizontal part, so I tried vertical-align:middle, but it didn't work.

我试过text-align:center，但它不做水平部分，所以我试过vertical-align:middle，但没有奏效。

Any ideas?

有任何想法吗？

Answer 1

回答by nonopolarity

If it is one line of text and/or image, then it is easy to do. Just use:

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

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

That's it. If it can be multiple lines, then it is somewhat more complicated. But there are solutions on http://pmob.co.uk/. Look for "vertical align".

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

Since they tend to be hacks or adding complicated divs... I usually use a table with a single cell to do it... to make it as simple as possible.

因为他们往往是黑客或添加复杂的 div ......我通常使用一个带有单个单元格的表格来做它......使其尽可能简单。

Update for 2020:

2020 年更新：

Unless you need make it work on earlier browsers such as Internet Explorer 10, you can use flexbox. It is widely supported by all current major browsers. Basically, the container needs to be specified as a flex container, together with centering along its main and cross axis:

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

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

To specify a fixed width for the child, which is called a "flex item":

为子项指定固定宽度，称为“弹性项目”：

#content {
  flex: 0 0 120px;
}

Example: http://jsfiddle.net/2woqsef1/1/

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

To shrink-wrap the content, it is even simpler: just remove the flex: ...line from the flex item, and it is automatically shrink-wrapped.

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

Example: http://jsfiddle.net/2woqsef1/2/

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

The examples above have been tested on major browsers including MS Edge and Internet Explorer 11.

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

One technical note if you need to customize it: inside of the flex item, since this flex item is not a flex container itself, the old non-flexbox way of CSS works as expected. However, if you add an additional flex item to the current flex container, the two flex items will be horizontally placed. To make them vertically placed, add the flex-direction: column;to the flex container. This is how it works between a flex container and its immediatechild elements.

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

There is an alternative method of doing the centering: by not specifying centerfor the distribution on the main and cross axis for the flex container, but instead specify margin: autoon the flex item to take up all extra space in all four directions, and the evenly distributed margins will make the flex item centered in all directions. This works except when there are multiple flex items. Also, this technique works on MS Edge but not on Internet Explorer 11.

有一种进行居中的替代方法：不指定center弹性容器在主轴和交叉轴上的分布，而是指定margin: auto弹性项目在所有四个方向上占用所有额外空间，以及均匀分布的边距将使 flex 项目在所有方向居中。除非有多个弹性项目，否则这有效。此外，此技术适用于 MS Edge，但不适用于 Internet Explorer 11。

Update for 2016 / 2017:

2016 / 2017 更新：

It can be more commonly done with transform, and it works well even in older browsers such as Internet Explorer 10 and Internet Explorer 11. It can support multiple lines of text:

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

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

Example: https://jsfiddle.net/wb8u02kL/1/

示例：https: //jsfiddle.net/wb8u02kL/1/

To shrink-wrap the width:

要收缩包装宽度：

The solution above used a fixed width for the content area. To use a shrink-wrapped width, use

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

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

Example: https://jsfiddle.net/wb8u02kL/2/

示例：https: //jsfiddle.net/wb8u02kL/2/

If the support for Internet Explorer 10 is needed, then flexbox won't work and the method above and the line-heightmethod would work. Otherwise, flexbox would do the job.

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

Answer 2

回答by Josh Crozier

Common techniques as of 2014:

截至 2014 年的常用技术：

Approach 1 - transformtranslateX/translateY:
Example Here/ Full Screen Example
In supported browsers(most of them), you can use top: 50%/left: 50%in combination with translateX(-50%) translateY(-50%)to dynamically vertically/horizontally center the element.
```
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
```

方法 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 displayof the targeted element to flexand use align-items: centerfor vertical centering and justify-content: centerfor 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;
}
```

方法 2 - Flexbox 方法：
示例在这里/全屏示例
在支持的浏览器中，将display目标元素的设置为flex并align-items: center用于垂直居中和justify-content: center水平居中。只是不要忘记添加供应商前缀以获得额外的浏览器支持（参见示例）。
```
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/bodyelement's height is set to 100%.
For vertical alignment, set the parent element's width/heightto 100%and add display: table. Then for the child element, change the displayto table-celland add vertical-align: middle.
For horizontal centering, you could either add text-align: centerto center the text and any other inlinechildren elements. Alternatively, you could use margin: 0 autoassuming the element is blocklevel.
```
html, body {
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}
```

方法 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;
}
```

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-topvalue 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;
}
```

方法 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;
}
```

Approach 5 - The line-heightmethod (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-heightvalue 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;
}
```

方法 5 -line-height方法（最不灵活 - 不建议）：
示例在这里
在某些情况下，父元素将具有固定的高度。对于垂直居中，您所要做的就是line-height在子元素上设置一个等于父元素固定高度的值。
虽然此解决方案在某些情况下会起作用，但值得注意的是，当有多行文本时它不起作用 -像这样。
```
.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.

方法 4 和 5 不是最可靠的。选择前 3 个中的一个。

Answer 3

回答by Vinod

Using flexbox/CSS:

使用弹性盒/CSS：

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

The CSS:

CSS：

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

Taken from Quick Tip: The Simplest Way To Center Elements Vertically And Horizontally

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

Answer 4

回答by FatherStorm

Add the line display: table-cell;to your CSS content for that div.

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

Only table cells support the vertical-align: middle;, but you can give that [table-cell] definition to the div...

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

A live example is here: http://jsfiddle.net/tH2cc/

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

Answer 5

回答by Santosh Khalse

You can try very easy code for this:

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

  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 link: http://codepen.io/santoshkhalse/pen/xRmZwr

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

Answer 6

回答by Kent Munthe Caspersen

I always use the following CSS for a container, to center its content horizontally and vertically.

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

See it in action here: https://jsfiddle.net/yp1gusn7/

在这里查看它的实际效果：https: //jsfiddle.net/yp1gusn7/

Answer 7

回答by Aminu Kano

Give this CSS class to the targeted <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>

Answer 8

回答by user3021146

You can use the flexproperty at the parentdivand add the margin:autoproperty to the children items:

您可以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;
}

You can see more options of flexhere: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

Answer 9

回答by shubham agrawal

Approach 1

方法一

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

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

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

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

Answer 10

回答by Arunkumar Maha

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

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

提问by Satch3000

回答by nonopolarity

Update for 2020:

2020 年更新：

Update for 2016 / 2017:

2016 / 2017 更新：

To shrink-wrap the width:

要收缩包装宽度：

回答by Josh Crozier

Common techniques as of 2014:

截至 2014 年的常用技术：

Approach 1 - `transformtranslateX`/`translateY`:

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

Approach 2 - Flexbox method:

方法 2 - Flexbox 方法：

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

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

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

方法 4 -`50%`从顶部绝对定位并带有位移：

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

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

回答by Vinod

回答by FatherStorm

回答by Santosh Khalse

回答by Kent Munthe Caspersen

回答by Aminu Kano

回答by user3021146

回答by shubham agrawal

Approach 1

方法一

Approach 2

方法二

Approach 3

方法三

回答by Arunkumar Maha

相关推荐

最近更新

标签

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

提问by Satch3000

回答by nonopolarity

Update for 2020:

2020 年更新：

Update for 2016 / 2017:

2016 / 2017 更新：

To shrink-wrap the width:

要收缩包装宽度：

回答by Josh Crozier

Common techniques as of 2014:

截至 2014 年的常用技术：

Approach 1 - transformtranslateX/translateY:

方法 1 - transformtranslateX/ translateY：

Approach 2 - Flexbox method:

方法 2 - Flexbox 方法：

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

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

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

方法 4 -50%从顶部绝对定位并带有位移：

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

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

回答by Vinod

回答by FatherStorm

回答by Santosh Khalse

回答by Kent Munthe Caspersen

回答by Aminu Kano

回答by user3021146

回答by shubham agrawal

Approach 1

方法一

Approach 2

方法二

Approach 3

方法三

回答by Arunkumar Maha

相关推荐

Html ol/ul 应该在 <p> 里面还是外面？

Html 将滚动条放在带有自动溢出的 div 之外

SVG 图像未显示在 html 电子邮件中

Html 单击按钮时如何隐藏/显示 div？

相关推荐

最近更新

标签

Approach 1 - `transformtranslateX`/`translateY`:

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

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

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

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

方法 4 -`50%`从顶部绝对定位并带有位移：

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

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