Question

我有一个框，无论窗口大小和文本在哪里居中，但我不能让它也在框内自身居中，而不是居中。我最初使用行高（单词确定）但它不适用于多行文本。

请解释它是如何运作的。

<div id="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

http://jsfiddle.net/84mHh/

Answer 1

我只使用text-align: center;属性

Answer 2

您可以使用text-align: center;

#box { 
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
    background: #b7d84b;
    text-align: center;
}

http://jsfiddle.net/84mHh/1/

Answer 3

首先使用CSS将文本居中：

#box {
    text-align: center;
    .
    .
    .
}

然后你可以用它来使它垂直居中：

#box p {
    vertical-align: middle;
    display: table-cell;
    height: 200px;
}

<强> JSFiddle

页面的文本和框中心

3 个答案: