Выравнивать текст/контент-центр внутри тега 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. Это позволит вашей разметке реагировать на содержимое.

DEMO

ОБНОВЛЕНИЕ:

Я завернул 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; 

}