如何在div中垂直对齐文本？

Question

我正在尝试找到将文本与div对齐的最有效方法。我尝试过一些东西，但似乎都没有。

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 1

CSS中的垂直居中
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

文章摘要：

对于CSS2浏览器，可以使用display:table / display:table-cell来集中内容。

样本也可在JSFiddle获得：

div { border:1px solid green;}

<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

可以将旧浏览器（IE6 / 7）的黑客合并到样式中，使用#隐藏新浏览器的样式：

div { border:1px solid green;}

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>

Answer 2

您需要添加line-height属性，该属性必须与div的高度相匹配。在你的情况下：

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}

<div class="center">
  A single line.
</div>

实际上，您可以完全删除height属性。

这仅适用于一行文字，所以要小心。

Answer 3

更新 - 这是一个很好的资源

http://howtocenterincss.com/

  

以CSS为中心是一个痛苦的屁股。根据各种因素，似乎有很多方法可以做到这一点。这会整合它们并为您提供每种情况所需的代码。

更新 - 使用Flexbox

为了使这篇文章与最新的技术保持同步，这里有一个更简单的方法来使用flexbox中心化。 IE9 and lower不支持Flexbox。

以下是一些很棒的资源：

• A guide to flexbox
• Centering elements with flexbox
• IE10 syntax for flexbox
• Support for Flexbox

jsfiddle with browser prefixes

<强> HTML

<ul>
    <li>
        <p>Some Text</p>
    </li>
    <li>
        <p>A bit more text that goes on 2 lines</p>
    </li>
    <li>
        <p>Even more text that demonstrates how lines can span multiple lines</p>
    </li>
</ul>

<强> CSS

li {
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column; /* column | row */
}

更新 - 另一种解决方案

This is from zerosixthree and lets you center anything with 6 lines of css

IE8 and lower

不支持此方法

jsfiddle

<强> HTML

<ul>
    <li>
        <p>Some Text</p>
    </li>
    <li>
        <p>A bit more text that goes on 2 lines</p>
    </li>
    <li>
        <p>Even more text that demonstrates how lines can span multiple lines</p>
    </li>
</ul>

<强> CSS

p {
    text-align: center;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

上一个回答

简单和交叉浏览器方法，作为标记答案中的链接有用，稍微过时。

  

如何在无序列表和div中垂直和水平居中显示文本而不使用JavaScript或css行高。无论您有多少文本，您都不必将任何特殊类应用于特定列表或div（每个代码都相同）。这适用于所有主流浏览器，包括IE9，IE8，IE7，IE6，Firefox，Chrome，Opera和Safari。由于现代浏览器没有的css限制，有2个特殊的样式表（1个用于IE7，另一个用于IE6）以帮助它们。

Andy Howard - How to vertically and horizontally center text in an unordered list or div

修改 因为我对上一个项目的IE7 / 6并不在意，所以我使用了一个稍微剥离的版本（即删除了使它在IE7和6中工作的东西）。可能对其他人有用......

jsfiddle

<强> HTML

<ul>
    <li>
        <div class="outerContainer">
          <div class="innerContainer">
            <div class="element">
                <p><!-- Content --></p>
            </div>
          </div>
        </div>
    </li>
    <li>
        <div class="outerContainer">
          <div class="innerContainer">
            <div class="element">
                <p><!-- Content --></p>
            </div>
          </div>
        </div>
    </li>
</ul>

和CSS：

.outerContainer {
    display: table;
    width: 100px; /* width of parent */
    height: 100px; /* height of parent */
    overflow: hidden;
}
.outerContainer .innerContainer {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
li {
    background: #ddd;
    width: 100px;
    height: 100px;
}

Answer 4

使用display: flex很容易。使用以下方法，div中的文字将垂直居中：

＆＃13;

＆＃13;

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* more style: */
  height: 300px;
  background-color: #888;
}

＆＃13;

<div>
  Your text here.
</div>

＆＃13;

＆＃13;

＆＃13;

如果你愿意，横向：

＆＃13;

＆＃13;

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* more style: */
  height: 300px;
  background-color: #888;
}

＆＃13;

<div>
  Your text here.
</div>

＆＃13;

＆＃13;

＆＃13;

您必须看到所需的浏览器版本;在旧版本中，代码不起作用。

Answer 5

我使用以下内容轻松地垂直居中随机元素：

HTML：

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS：

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

这会将我div中的文字居中放在200px高的外div的确切垂直中间。请注意，您可能需要使用浏览器前缀（例如我的情况下为-webkit-）才能使其适用于您的浏览器。

这不仅适用于文本，也适用于其他元素。

Answer 6

您可以将显示设置为“table-cell”并应用vertical-align：middle;

    {
        display:table-cell;
        vertical-align:middle;
    }

但是，根据我在未经许可的情况下从http://www.w3schools.com/cssref/pr_class_display.asp复制的摘录，所有版本的Internet Explorer均不支持此功能。

注意：值“inline-table”，“table”，“table-caption”，“table-cell”，“table-column”，“table-column-group”， IE7及更早版本不支持“table-row”，“table-row-group”和“inherit”。 IE8需要一个！DOCTYPE。 IE9支持这些值。

下表显示了来自http://www.w3schools.com/cssref/pr_class_display.asp的允许显示值。我希望这有帮助

Answer 7

<强> UPD： 这一天（我们不再需要IE6-7-8）我只会使用css display：table for this issue（或display：flex）

表：

.vcenter{
    display: table;
    background:#eee;
    width: 150px;
    height: 150px;
    text-align: center;
}
    
.vcenter :first-child {
    display: table-cell;
    vertical-align: middle;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>
   

软硬度：

.vcenter{
    display: flex; /* <-- here */
    background:#eee;
    width: 150px;
    height: 150px; /* <-- here */
    align-items: center; /* <-- here */
}

<div class="vcenter">
  <p>This is my Text</p>
</div>
   

---

这是（实际上，是）我最喜欢的解决方案（简单且非常好的浏览器支持）：

div{
    margin:5px;
    text-align:center;
    display:inline-block;
}

.vcenter{
    background:#eee;
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}
    
.vcenter :first-child {
    display:inline-block;
    vertical-align:middle;
    max-width: 99.999%;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>
<div class="vcenter">
  <h4>This is my Text<br />Text<br />Text</h4>
</div>
<div class="vcenter">
  <div>
   <p>This is my</p>
   <p>Text</p>
  </div>
</div>

Answer 8

这是一种最适合单行文本的解决方案。

如果已知行数

，它也适用于多行文本，并进行一些调整

.testimonialText{
    font-size:1em;/*Set a font size*/
}
.testimonialText:before {/*add a pseudo element*/
    content:"";
    display:block;
    height:50%;
    margin-top:-0.5em;/*half of the font size*/
}

Here is a JSFiddle

Answer 9

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container{
        height:250px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
      font-size:24px;}
    </style>
  </head>
  <body>
    <div class="container">
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>
</html>

Answer 10

您可以使用flexbox在div中垂直对齐中心文本。

<div>
   <p class="testimonialText"> This is the testimonial text. </p>
</div>

div {
   display: flex;
   align-items: center;
}

您可以在此链接上了解有关它的更多信息： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 11

没有一个答案对我有帮助，试试这个，加上父div：

display:flex;
align-items:center;

Answer 12

检查这个简单的解决方案：

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float:left;
    display:block;
    width:100%;
    height:88px
}

.block-title h3 {
   display:table-cell;
   vertical-align:middle;
   height:inherit
}

JSFiddle

Answer 13

您可以使用显示网格和放置项目中心：

.container {
  width: 200px;
  height: 200px;
  border: solid red;
  display: grid;
  place-items: center;
}

<div class="container">
  Lorem, ipsum dolor.
</div>

Answer 14

这是我发现的最干净的解决方案（IE9 +），并为＆＃34; off .5像素＆＃34;添加了一个修复程序。使用transform-style解决其他答案已被忽略的问题。

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

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

来源：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Answer 15

有一种更简单的方法可以垂直对齐内容而无需使用table / table-cell：

http://jsfiddle.net/bBW5w/1/

在其中我添加了一个隐形（width = 0）div，它假设容器的整个高度。

它似乎适用于IE和FF（最新版本），没有与其他浏览器一起检查

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

当然还有CSS：

.t, .t > div:first-child
{ 
    border:1px solid green;
}
.t
{
    height:400px;
}
.t > div 
{ 
    display:inline-block; 
    vertical-align:middle  
}
.t > div:last-child
{
    height:100%;    
}

Answer 16

简单解决不知道值的元素

<强> HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

Answer 17

根据Adam Tomat的回答，准备了 jsfiddle example来对齐 div

中的文字

if (link.textContent.toLowerCase() == 'remove') { 
    // since remove is already lowercase
    // do stuff
}

在CSS中使用 display：flex

<div class="cells-block">    
    text<br/>in the block   
</div>

另一个example，blog中的解释很少。

Answer 18

在网格项目上的边距自动。
与flexbox相似，在网格项目上应用margin-auto使其在两个轴上居中。

.container{
  display: grid;
}
.element{
  margin: auto;
}

Answer 19

  h1{
  margin:0;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}
.container {
    height: 200px;
    width: 500px;
    position: relative;
    border: 1px solid #eee;
}

    <div class="container">
            <h1>vertical align text</h1>
    </div>

有了这个技巧，你可以对齐任何东西，如果你不想让它为中心添加“left：0”左对齐。

Answer 20

<强> HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

<强> CSS

 .relative{
    position:relative;
 }
 .absolute{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.5);
 }
 .table{
    display:table;
    height:100%;
    width:100%;
    text-align:center;
    color:#fff;
 }
 .table-cell{
    display:table-cell;
    vertical-align:middle;
 }

Answer 21

使用flex时要注意浏览器渲染的差异。

这适用于Chrome和IE：

＆＃13;

＆＃13;

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}

＆＃13;

<div class="outer"><div class="inner">Active Tasks</div></div>

＆＃13;

＆＃13;

＆＃13;

与只适用于Chrome的那个比较：

＆＃13;

＆＃13;

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: #fcc;
}

＆＃13;

<div class="outer">
<div class="inner"><span style="    margin: auto;">Active Tasks</span></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 22

Flexbox对我来说效果很好，可以将父div内的多个元素水平和垂直居中。

HTML代码：

<div class="parent-div">
    <div class="child-div">
      <a class="footer-link" href="https://www.github.com/">GitHub</a>
      <a class="footer-link" href="https://www.facebook.com/">Facebook</a>
      <p class="footer-copywrite">© 2019 Lorem Ipsum.</p>
    </div>
  </div>

CSS代码：
下面的代码将parent-div内的所有元素堆叠在一列中，将元素水平和垂直居中。 我使用child-div将两个Anchor元素保持在同一行（行）。如果没有child-div，则所有三个元素（Anchor，Anchor和Paragraph）都将堆叠在parent-div的列内。这里只有child-div堆叠在parent-div列中。

/* */
.parent-div {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Answer 23

这是CSS中使用div的{​​{1}}模式中的div的另一种变体。

calc()

这样可行，因为：

• <div style="height:300px; border:1px solid green;"> Text in outer div. <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)"> Text in inner div. </div> </div> ，用于在position:absolute
中精确放置div
• 我们知道内部div的高度，因为我们将其设置为div。
• 20px 50％ - 高度的一半，用于居中calc(50% - 10px)

Answer 24

工作正常

HTML

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

SASS

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

没有和带有图片标记<mat-icon>（这是一种字体）

Answer 25

使用CSS网格为我做到了。

.outer {
  background-color: grey;
  width: 10rem;
  height: 10rem;
  display: grid;
  justify-items: center;
}

.inner {
  background-color: red;
  align-self: center;
}

<div class='outer'>
  <div class='inner'>
    Content
  </div>
</div>

Answer 26

HTML：

<div class="col-md-2 ml-2 align-middle">
    <label for="option2" id="time-label">Time</label>
</div>

CSS：

.align-middle {
    margin-top: auto;
    margin-bottom: auto;
}

Answer 27

您可以使用CSS flexbox。

.testimonialText {
  height: 500px;
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b4d2d2;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 28

尝试嵌入表格元素。

<div>
    <table style='width:200px; height:100px;'>
        <td style='vertical-align:middle;'>
            copenhagen
        </td>
    </table>
</div>

Answer 29

嗯，显然有很多方法可以解决这个问题。

但我有<div>绝对定位，height:100%（实际上，top:0;bottom:0和固定宽度）和display:table-cell只是无法垂直居中。我的解决方案确实需要一个内部span元素，但是我看到许多其他解决方案也有，所以我不妨添加它：

我的容器是.label，我希望数字垂直居中。我通过绝对定位top:50%并设置line-height:0

来做到这一点

<div class="label"><span>1.</span></div>

CSS如下：

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

查看实际操作：http://jsfiddle.net/jcward/7gMLx/

Answer 30

有several Tricks在Div的中心显示内容/图像。一些答案非常好，我完全同意这些。

CSS中的绝对水平和垂直居中

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

超过10 techniques with Examples。现在它取决于你喜欢的。

毫无疑问，display:table; display:table-Cell是一个更好的技巧。

一些好的技巧如下：

技巧1 - 使用display:table; display:table-cell

HTML 的

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT 
    </div>
  </div>
</div>

CSS代码

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

技巧2 - 使用display:inline-block

HTML 的

<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT 
  </div>
</div>

CSS代码

.Center-Container.is-Inline { 
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ 
}

技巧3 - 使用position:relative;position:absolute

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER,<br>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>

Answer 31

如果您需要使用min-height属性，则必须添加此CSS：

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}

Answer 32

CSS：

.vertical {
   display: table-caption;
}

将此类添加到包含要垂直对齐的内容的元素