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

Question

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

我需要覆盖页面和文本的整个宽度和高度，以成为死中心。

我可以用display：table来做到这一点;但我需要高度：100%;在html和正文上。

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

是否可以在没有显示的情况下使用居中文本进行 100% 叠加：表格;

我这里有一个例子 - 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

实现这一目标

的"正确"方法是使用display: flex;

JS小提琴

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

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

编辑：

全屏中心内容的演示

Answer 3

您可以使用绝对定位和转换的组合。下面是从代码分叉的示例。

https://jsfiddle.net/dwkn5563/

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