我正在尝试找到最有效的方法来将文本与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>


当前回答

有几个技巧可以在div的中心显示内容或图像。有些答案非常好,我也完全同意。

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

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

有10多种技术和示例。现在取决于你喜欢哪一个。

毫无疑问,显示:表格;display:table Cell是一个更好的技巧。

以下是一些好技巧:

技巧1-使用display:table;显示:表格单元

HTML

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

货物积载与系固安全操作规则

.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-通过使用显示:内联块

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 Internet&nbsp;Explorer 9+ */
}

技巧3-使用位置:相对;位置:绝对

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

其他回答

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

这是我找到的最干净的解决方案(InternetExplorer9+),并通过使用其他答案省略的转换样式,为“偏移0.5像素”问题添加了修复。

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

来源:垂直对齐任何东西,只需3行CSS

这很好:

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>(这是一种字体)。

根据Adam Tomat的回答,我们准备了一个JSFiddle示例来对齐div中的文本:

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

通过在CSS中使用display:flex:

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* Vertically   */
    justify-content: flex-end; /* Horisontally */
    text-align: right;         /* Addition: for text's lines */
}

另一个例子和一篇博客文章中的一些解释。

这是一个很好的资源

从…起http://howtocenterincss.com/:

以CSS为中心是一件令人头疼的事。根据各种因素,似乎有无数种方法可以做到这一点。这将整合它们,并为您提供每种情况所需的代码。

使用Flexbox

在保持这篇文章与最新技术保持同步的同时,这里有一个更容易的方法来使用Flexbox将内容居中。Internet Explorer 9及更低版本不支持Flexbox。

以下是一些很棒的资源:

Flexbox指南带Flexbox的定心元件Flexbox的Internet Explorer 10语法Flexbox支架

带有浏览器前缀的JSFiddle

李{显示:柔性;对齐内容:中心;对齐内容:居中;弯曲方向:柱;/*列|行*/}<ul><li><p>某些文本</p></li><li><p>还有两行文字</p></li><li><p>更多的文本演示了行如何跨越多行</p></li></ul>

另一种解决方案

这是从零六三开始的,可以让你用六行CSS将任何东西居中

Internet Explorer 8及更低版本不支持此方法。

小提琴演奏家

p型{文本对齐:居中;位置:相对;顶部:50%;-ms变换:translateY(-50%);-webkit转换:translateY(-50%);变换:translateY(-50%);}<ul><li><p>某些文本</p></li><li><p>还有两行文字</p></li><li><p>更多的文本演示了行如何跨越多行</p></li></ul>

上一个答案

一种简单且跨浏览器的方法很有用,因为标记答案中的链接有点过时。

如何在无序列表和div中垂直和水平居中文本,而不使用JavaScript或CSS行高。无论您有多少文本,您都不必将任何特殊类应用于特定列表或div(每个列表或div的代码都相同)。这适用于所有主要浏览器,包括Internet Explorer 9、Internet Explorer 8、Internet Explorer 7、Internet Explorer 6、Firefox、Chrome、Opera和Safari。有两个特殊的样式表(一个用于InternetExplorer7,另一个用于Internet Explorer6)可以帮助它们,因为它们的CSS限制是现代浏览器所没有的。

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

由于我在上一个项目中不太关心InternetExplorer7/6,所以我使用了一个稍微精简的版本(即删除了使其在InternetExplorer7和6中工作的内容)。这可能对其他人有用。。。

JSFiddle公司

.外部容器{显示:表格;宽度:100px;/*父项的宽度*/高度:100px;/*父项的高度*/溢出:隐藏;}.outerContainer.innerContainer{显示:表格单元格;垂直对齐:中间;宽度:100%;边距:0自动;文本对齐:居中;}李{背景:#ddd;宽度:100px;高度:100px;}<ul><li><div class=“outerContainer”><div class=“innerContainer”><div class=“element”><p><!-- 内容-->所容纳之物</p></div></div></div></li><li><div class=“outerContainer”><div class=“innerContainer”><div class=“element”><p><!-- 内容-->所容纳之物</p></div></div></div></li></ul>