在DIV标记内对齐文本/内容中心

Question

我正在设计一个包含平铺内容的页面。我可以将瓷砖放置在中心位置，但无法对其内容进行定位。平铺内容的垂直对齐居中，但水平对齐向左对齐。我缺少什么调整吗？？

这是我的剧本，

HTML

<div class="content">
        <div class="tile-container">
            <div class="tile">
                <p>Tile 1</p>
            </div>
            <div class="tile">
                <p>Tile 2</p>
            </div>
            <div class="tile">
                <p>Tile 3</p>
            </div>
            <div class="tile">
                <p>Tile 4</p>
            </div>               
        </div>
    </div>

CSS

.content {
    margin-top: 10%;
}
.tile-container {
    width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.tile {
    display: inline-block;
    position: relative;
    height: 250px;
    width: 250px;
    background: red;
    margin: 8px;
    border-radius: 5px;
    z-index: 0;
}
    .tile:hover {
        background: red;
        z-index: 100;
        -moz-transform: scale(1.1,1);
        -ms-transform: scale(1.1,1);
        -o-transform: scale(1.1,1);
        -webkit-transform: scale(1.1,1);
        transform: scale(1.1,1);
        box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    }
.tile-container p {
    margin: 0;
    position: absolute;
    top: 50%;
}

Answer 1

所有显示的解决方案都是绝对静态的。如果你必须处理不同的内容，你应该采取不同的方式。使用table和table-cell。这将使您的标记对内容做出响应。

演示

更新：

我将p封装在一个额外的div中，并更改了css：

.tile div{
    display: table;
    height: 100%;
    width: 100%;
}
.tile div p{
    display: table-cell;
    vertical-align: middle;
}
.tile-container p {
    margin: 0;
    position: relative;
}

Answer 2

绝对位置毫无乐趣：

.tile-container p {
    margin-top:50%;
    text-align:center;
}

Answer 3

请尝试此

  .tile-container p{
   position:relative;
}