Как я могу центрировать кнопку или текст внутри div горизонтально?

Question

У меня этот HTML-код, который является частью сетки с использованием display: table-cell. Ширина DIV шире, чем содержание:

<div>123</div> 
<div><button>1</button></div> 

Как можно ввести текст и кнопки внутри больших DIV?

Answer 1

.centeredFlex { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 600px; /* whatever you want... */ 
 
    width: 100%; /* whatever you want... */ 
 
}

<div class="centeredFlex"> 
 
    <button>1</button> 
 
</div>

Посмотрите на flexbox: http://www.w3schools.com/css/css3_flexbox.asp!

Answer 2

flex-box является лучшим решением

.container{ 
 
\t display: flex; 
 
\t align-items: center; 
 
\t justify-content: center; 
 
\t flex-direction: column; 
 
\t height: 100vh; 
 
\t background: brown; 
 
}

<div class="container"> 
 
\t <p>Text at center</p> 
 
\t <button>button</button> 
 
</div>

Вы можете удалить align-items: center, если вы не хотите, горизонтальный центр и может удалить justify-content: center вы не хотите, вертикальный центр