Question

我这里有一个jsfiddle - http://jsfiddle.net/j4zvyz7h/1/

我需要覆盖页面和文本的整个宽度和高度为死点。

我可以用display：table;但我需要身高：100％;在HTML和身体上。

这导致实际代码出现问题。

是否可以使100％覆盖中心文本而不显示：table;

我在这里有一个例子 - http://jsfiddle.net/j4zvyz7h/2/

我可以水平居中但不垂直居中。

是否可以在第二个示例中水平居中文本。

        html, body{
            height: 100%;    
        }

        .block{
            background: rgba(230, 97, 97, 0.4);
            display: table;
            width: 100%;
            height: 100%;
            text-align: center;
        }

        .text{
            display: table-cell;
            vertical-align: middle;
        }

Answer 1

你也可以这样做：

.text{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
}

http://jsfiddle.net/j4zvyz7h/5/

您必须稍微调整边距才能完美居中。一个负边距 - 顶部的值恰好是元素高度的一半。

Answer 2

＆＃39;正确＆＃39;实现这一目标的方法是使用display: flex;

JS Fiddle

＆＃13;

.box {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: brown;
    height: 350px;
}
.box > p {
    font-family: sans-serif;
    color: yellow;
}

＆＃13;

<div class="box">
    <p>Centered content goes here</p>
</div>

＆＃13;

修改

Demo for full screen centered content

Answer 3

您可以使用绝对定位和变换的组合。这是一个从您的代码分叉的示例。

https://jsfiddle.net/dwkn5563/

.text{
    position:absolute;
    top:50%;
    left:50%;
    transform:translateY(-50%) translateX(-50%);
}

水平和垂直居中文本而不显示表格

3 个答案: