Estou tentando centralizar o conteúdo das minhas abas verticalmente, mas quando adiciono o estilo CSS display:inline-flex
, o alinhamento horizontal do texto desaparece.
Como posso fazer os dois alinhamentos de texto x e y para cada um dos meus separadores?
* { box-sizing: border-box; }
#leftFrame {
background-color: green;
position: absolute;
left: 0;
right: 60%;
top: 0;
bottom: 0;
}
#leftFrame #tabs {
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 25%;
}
#leftFrame #tabs div {
border: 2px solid black;
position: static;
float: left;
width: 50%;
height: 100%;
text-align: center;
display: inline-flex;
align-items: center;
}
<div id=leftFrame>
<div id=tabs>
<div>first</div>
<div>second</div>
</div>
</div>
transformação
translateX
/translateY
:[**Exemplo Aqui*][1] / [Exemplo de tela cheia**][2]
Em navegadores suportados (a maioria deles), você pode utilizar top: 50%
/esquerda: 50%
em combinação com translateX(-50%) translateY(-50%)
para centralizar dinamicamente o elemento verticalmente/horizontalmente.
.container {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>
[**Exemplo Aqui*][4] / [Exemplo de tela cheia**][5]
Em navegadores suportados, defina o display' do elemento alvo para
flex' e utilize align-items: center' para centralização vertical e
justify-content: center' para centralização horizontal. Apenas don'não esqueça de adicionar prefixos de fornecedores para suporte adicional ao navegador ([veja exemplo][7]).
html, body, .container {
height: 100%;
}
.container {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}
<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>
célula de mesa
/alinhamento vertical: meio
:[**Exemplo Aqui*][8] / [Exemplo de tela cheia**][9]
Em alguns casos, você precisará garantir que o elemento html
/body
esteja configurado para 100%
.
Para alinhamento vertical, defina o elemento pai's 'largura'/'altura' para 100%
e adicione display: table
. Depois para o elemento criança, mude o display
para célula de mesa
e adicione alinhamento vertical: meio
.
Para a centralização horizontal, você pode adicionar 'texto-alinhado: centro' para centralizar o texto e qualquer outro elemento 'em linha' infantil. Alternativamente, você poderia usar margin: 0 auto
, assumindo que o elemento esteja no nível block
.
html, body {
height: 100%;
}
.parent {
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.parent > .child {
display: table-cell;
vertical-align: middle;
}
<section class="parent">
<div class="child">I'm vertically/horizontally centered!</div>
</section>
50%
a partir do topo com deslocamento:[**Exemplo Aqui*][10] / [Exemplo de tela cheia**][11]
Esta abordagem assume que o texto tem uma altura conhecida - neste caso, 18px
. Basta posicionar absolutamente o elemento 50%
a partir do topo, em relação ao elemento pai. Utilize um valor negativo de margin-top
que é metade da altura conhecida do elemento's, neste caso - -9px
.
html, body, .container {
height: 100%;
}
.container {
position: relative;
text-align: center;
}
.container > p {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -9px;
}
<div class="container">
<p>I'm vertically/horizontally centered!</p>
</div>
[Exemplo Aqui][12]
Em alguns casos, o elemento pai terá uma altura fixa. Para a centralização vertical, tudo que você tem que fazer é definir um valor de "altura de linha" no elemento criança igual à altura fixa do elemento pai.
Embora esta solução funcione em alguns casos, vale a pena notar que ela ganhou't funciona quando há múltiplas linhas de texto - [como esta][13].
.parent {
height: 200px;
width: 400px;
background: lightgray;
text-align: center;
}
.parent > .child {
line-height: 200px;
}
<div class="parent">
<span class="child">I'm vertically/horizontally centered!</span>
</div>
Se o CSS3 for uma opção (ou se você tiver um fallback) você pode usar transform:
.center {
right: 50%;
bottom: 50%;
transform: translate(50%,50%);
position: absolute;
}
Ao contrário da primeira abordagem acima, você não'não quer usar left:50% com a tradução negativa porque há's um bug de overflow no IE9+. Utilize um valor positivo para a direita e você ganhou't vê barras de rolagem horizontais.
Outra abordagem é usar a tabela:
<div style="border:2px solid #8AC007; height:200px; width:200px;">
<table style="width:100%; height:100%">
<tr style="height:100%">
<td style="height:100%; text-align:center">hello, multiple lines here, this is super long, and that is awesome, dude</td>
</tr>
</table>
</div>