Question

两个问题合二为一。这对我来说是第一次大声笑

无论如何，正如您可能已经意识到的那样，垂直居中内容对网站开发来说是一种痛苦。由于行高，我已经知道如何在div中居中单行文本。但是我的问题是我想在div中居中多行文本。

有谁知道怎么做？我从头开始，所以不幸的是没有代码。

Answer 1

css display:table-cell方法

    <div>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit
       . Mauris tempus blandit egestas. Phasellus lacinia non lorem
        hendrerit sagittis. Aenean iaculis sit amet erat sed feugia
        t. Cras vulputate odio nec ultricies facilisis. Phasellus a
        uctor commodo ligula nec tincidunt. In non leo facilisis p
        urus hendrerit volutpat vitae at nunc

    </div>

CSS

div { display:table-cell;  vertical-align: middle; height:300px; }

<强>更新/

作为评论，如果我们使用这些div同时创建布局和样式内容，那么使用它是一个杀手。

这是一个例子，我们可以保留布局div并使用div来呈现内容。

演示：http://jsfiddle.net/sPG8j/2/

它可能是许多解决方案中的一种，但（我会说）最简单的，或许可以说是一个好主意，将“内容样式div”与“布局创建div”分开......无论如何...... CMS等..

<强>更新

这也很方便（jquery简写为了方便）（说我们不想通过并重新标记我们的所有内容）

http://jsfiddle.net/mWdCT/1/

$(".layout").wrapInner( "<div class='data'><div class='content'></div></div>" );

示例中的CSS

.data { display:table; height:100%; width:100%; }
.content { display:table-cell;  vertical-align: middle; height:100%; }

Answer 2

就像你说的那样，这是一种痛苦，没有简单的答案。在开始之前，您很可能必须更好地定义您的用例，因为不同的技术可能会以不同的方式中断。试试这些教程：

http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

http://blog.themeforest.net/tutorials/vertical-centering-with-css/

CSS：在DIV中居中多行文本

2 个答案: