堆栈内存溢出
  繁体   English   中英

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

[英]How can I center text (horizontally and vertically) inside a div block?

 原文  2011-04-18 13:22:47  5   27    html/ css

问题描述

我有一个div设置为display:block （ 90px height和width ），我里面有一些文本。

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

我试过text-align:center ，但它没有做垂直居中部分，所以我尝试了vertical-align:middle ，但它没有用。

有任何想法吗？

27 个解决方案

解决方案1
 1826 已采纳  2011-04-18 13:29:31

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

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 容器中添加一个额外的 flex 项，这两个 flex 项将被水平放置。 要使它们垂直放置，请添加flex-direction: column; 到弹性容器。 这就是它在 flex 容器及其直接子元素之间的工作方式。

还有另一种进行居中的方法：不为 flex 容器的主轴和交叉轴上的分布指定center ，而是在 flex 项目上指定margin: auto以占用所有四个方向上的所有额外空间，并且均匀分布的边距将使弹性项目在所有方向上居中。 这有效，除非有多个弹性项目。 此外，此技术适用于 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 会完成这项工作。

解决方案2
 480  2014-09-12 01:23:14

截至 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 不是最可靠的。 选择前 3 个中的一个。

解决方案3
 95  2015-11-10 03:25:16

使用弹性盒/CSS：

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

CSS：

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

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

解决方案4
 34  2011-04-18 13:28:13

添加行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
}

解决方案5
 22  2017-09-11 12:41:27

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

解决方案6
 21  2016-12-16 10:07:37

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

  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

解决方案7
 19  2015-08-23 08:48:21

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

解决方案8
 12  2018-06-26 10:33:34

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

解决方案9
 12  2020-07-24 04:06:23

2020年的方式

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

解决方案10
 10  2017-07-05 12:54:03

方法一

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

方法二

 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>

解决方案11
 7  2015-02-22 03:34:27

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

解决方案12
 6  2020-08-18 13:42:27

在父div中添加以下代码

 display: grid;
 place-items: center;

解决方案13
 5  2015-12-09 02:00:54

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

解决方案14
 5  2018-02-20 03:33:02

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

解决方案15
 4  2020-04-06 18:06:07

网格

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

解决方案16
 3  2013-11-19 09:53:26

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

line-height: 90px;

解决方案17
 2  2016-12-05 20:45:24

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

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

解决方案18
 2  2017-03-22 06:15:14

您可以尝试以下方法：

  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 并非适用于所有浏览器。 确保添加适当的供应商前缀以获得额外的浏览器支持。

解决方案19
 2  2017-09-27 16:17:45

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

解决方案20
 2  2020-03-05 02:42:21

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

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

输出如下所示：

解决方案21
 1  2017-03-17 05:25:10

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

解决方案22
 1  2019-08-14 09:58:48

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

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

解决方案23
 0  2017-04-26 13:08:50

应用风格：

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

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

解决方案24
 0  2018-02-02 11:15:16

这对我有用：

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

解决方案25
 -1  2016-09-15 20:01:57

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

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

解决方案26
 -1  

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

解决方案27
 -1  2021-07-21 20:58:44

.container  p {display:flex;align-item:center;
justify-content: center}

解决方案28
 -2  2018-07-04 20:12:54

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

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在div内水平和垂直居中放置图像和文本？ 如何将div的内容在其中垂直或水平居中？ 如何垂直和水平居中放置DIV？ 如何在div内水平居中放置网格块？ 如何在较大的div内垂直和水平居中div？ 如何使用Bootstrap垂直和水平居中一个块？ 如何在<div>中水平和垂直居中<img>？ 如何在图像中居中（垂直和水平）文本中的文本<a>？</a> 将 div 中的文本水平和垂直居中 如何将图片垂直和水平居中？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM