如何在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中心化.不支持Flexbox __CODE__.

这里有一些很棒的资源:

• flexbox指南
• 使用flexbox对中元素
• flexbox的IE10语法
• 支持Flexbox

jsfiddle与浏览器前缀

HTML

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

CSS

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

更新 - 另一个解决方案

这是来自zerosixthree,让你以6行css为中心

不支持此方法 __CODE__

的jsfiddle

HTML

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

CSS

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

以前的答案

简单和跨浏览器方法,作为标记答案中的链接有用略微过时.

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

Andy Howard - 如何在无序列表或div中垂直和水平居中文本

编辑: 因为我对上一个项目的IE7/6并不在意,我使用了一个稍微剥离的版本(即删除了使它在IE7和6中工作的东西).可能对其他人有用......

的jsfiddle

HTML

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

而CSS:

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

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

Answer 4

它很容易display: flex.使用以下方法,div将垂直居中的文本:

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

<div>
  Your text here.
</div>

如果你想,横向:

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

<div>
  Your text here.
</div>

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

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","table-row","table-row IE7及更早版本不支持-group"和"inherit".IE8需要一个!DOCTYPE.IE9支持这些值.

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

Answer 7

UPD: 这几天(我们不再需要IE6-7-8)我只是使用css display:table来解决这个问题

.vcenter {
    display: table;
    background: #eee; /* optional */
    width: 150px;
    height: 150px;
    text-align: center; /* optional */
}

.vcenter > :first-child {
    display: table-cell;
    vertical-align: middle;
}

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

这是我对这个问题最喜欢的解决方案(简单且非常好的浏览器支持):

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

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

Answer 8

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-Code：
下面的代码将 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 9

非常非常简单的解决方案，我在我的项目中多次使用它：

源代码

.welcome_box{
    height: 300px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    border: solid 1px #dadada;
}

<div class="welcome_box">Hello Friends</div>

输出：

谢谢你提出这个问题。乐于分享。

Answer 10

没有一个答案帮助了我,尝试这个,添加父div:

display: flex;
align-items: center;

Answer 11

这是一个最适合单行文本的解决方案.

如果已知行数,它也适用于多行文本,并进行一些调整

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

这是一个JSFiddle

Answer 12

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

您可以使用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 14

检查一下这个简单的解

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 15

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

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

我在其中添加了一个不可见的（width = 0）div，它假定了容器的整个高度。

它似乎可以在Internet Explorer和Firefox（最新版本）中使用。我没有与其他浏览器核对

  <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

这是我发现的最干净的解决方案(IE9 +),并通过使用transform-style省略的其他答案添加了"off by .5 pixel"问题的修复程序.

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

使用 CSS 网格为我做到了：

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

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

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

Answer 18

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 19

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

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

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