我正在尝试找到最有效的方法来将文本与div对齐。我尝试了一些方法,但似乎没有一个有效。

.推荐文本{位置:绝对;左:15px;顶部:15px;宽度:150px;高度:309px;垂直对齐:中间;文本对齐:居中;字体系列:Georgia,“Times New Roman”,Times,serif;字体样式:斜体;填充:1em 0 1em 0;}<div class=“推荐文本”>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯,quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。Duis aute irure多尔代表在voluptate velit esse cillum dolore eu fugiat nullapariator。除了你偶尔犯下的错误外,你还得承担责任,这是因为你在实验室里表现得很糟糕。</div>


当前回答

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

这对Chrome和Internet Explorer都很有效:

.外部{显示:柔性;宽度:200px;高度:200px;背景色:#ffc;}.内部{显示:柔性;宽度:50%;高度:50%;边距:自动;文本对齐:居中;对齐内容:中心;对齐项目:居中;背景色:#fcc;}活动任务</div></div>

与仅适用于Chrome的这款相比:

.外部{显示:柔性;宽度:200px;高度:200px;背景色:#ffc;}.内部{显示:柔性;宽度:50%;高度:50%;边距:自动;背景色:#fcc;}<div class=“outer”>活动任务</span></div></div>

其他回答

检查此简单解决方案:

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

我使用以下方法轻松地将随机元素垂直居中:

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)来使其适用于您的浏览器。

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

您可以使用显示网格并将项目放置在中心:

.容器{宽度:200px;高度:200px;边框:纯红色;显示:栅格;放置项目:中心;}<div class=“container”>Lorem,ipsum dolor。</div>

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

有一种更简单的方法可以垂直对齐内容,而无需诉诸表格/表格单元格:

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