Como alinhar elementos verticalmente em uma div?

792

Eu tenho um div com duas imagens e um h1 . Todos eles precisam estar alinhados verticalmente dentro da div, próximos um do outro.

Uma das imagens precisa ser absoluteposicionada dentro da div.

Qual é o CSS necessário para que isso funcione em todos os navegadores comuns?

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>
Abdu
fonte
14
Eu fiz uma lista de todas as maneiras para align..I verticais vou deixá-lo aqui: jsfiddle.net/techsin/FAwku/1
Muhammad Umer
2
Aqui estão dois métodos simples para o centro um elemento dentro de uma div, na vertical, horizontal ou ambos (CSS puro): stackoverflow.com/a/31977476/3597276
Michael Benjamin
1
margin-top: auto e margin-bottom: auto (funciona para muitos casos).
CrippledTable

Respostas:

932

Uau, esse problema é popular. É baseado em um mal-entendido novertical-align propriedade. Este excelente artigo explica:

Entendimento vertical-align, ou "Como (não) centralizar verticalmente o conteúdo", de Gavin Kistner.

“Como centralizar no CSS” é uma ótima ferramenta da web que ajuda a encontrar os atributos de centralização do CSS necessários para diferentes situações.


Em poucas palavras (e para evitar a podridão do link) :

  • Os elementos inline (e apenas elementos inline) podem ser alinhados verticalmente em seu contexto via vertical-align: middle. No entanto, o "contexto" não é toda a altura do contêiner pai, é a altura da linha de texto em que estão. Exemplo de jsfiddle
  • Para elementos de bloco, o alinhamento vertical é mais difícil e depende fortemente da situação específica:
    • Se o elemento interior pode ter uma altura fixa , você pode fazer a sua posição absolutee especificar a sua height, margin-tope topposição. exemplo jsfiddle
    • Se o elemento centralizado consistir em uma única linha e sua altura pai for fixa, você pode simplesmente definir o contêiner line-heightpara preencher sua altura. Este método é bastante versátil na minha experiência. exemplo jsfiddle
    • ... existem mais casos especiais.
Konrad Rudolph
fonte
142
O problema com as soluções "válidas" (não a vertical-align: middle) é que você precisa especificar uma altura fixa. Não é muito possível para Web Design Responsivo .
Emilie
1
Eu tinha essa estrutura: <div height = "## px"> Meu texto </ div> Trabalhou para mim definir a propriedade lineHeight usando o mesmo valor usado na propriedade div height: '## px' (## porque esse valor é dinâmico no meu caso) obrigado
patricK
8
Isso também funciona com elementos inline-blocke table-cell. Se você estiver tendo problemas com isso, tente ajustar line-heighto elemento do contêiner (isto é, contexto), pois ele é usado nos vertical-aligncálculos da caixa de linha.
Alex W
1
css-tricks.com/centering-css-complete-guide <- algumas boas opções apresentadas aqui, encontrei-me recorrer à solução / table-cell mesa a maior parte do tempo, porém
shaunhusain
1
Essa ferramenta (howtocenterincsss.com) é bastante incrível porque funcionou imediatamente dentro do meu CSS existente! Isso é super raro. Lembre-se dos velhos tempos em que você tinha que copiar folhas de estilo inteiras de algum exemplo, às vezes até o exemplo de HTML e depois remover e renomear elementos um após o outro até que fosse o que eu precisava. Não é o caso deste site!
konstantin
190

Agora que o suporte ao flexbox está aumentando, esse CSS aplicado ao elemento que contenha centralizaria verticalmente o item contido:

.container {        
    display: flex;
    align-items: center;
}

Use a versão prefixada se você também precisar direcionar o Explorer 10 e navegadores Android antigos (<4.4):

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}
E. Serrano
fonte
Uma boa solução, obrigado. Você pode sugerir como fazer o flexbox exibir uma barra de rolagem horizontal, caso o elemento interno seja maior que o contêiner? (Estou tentando tornar o elemento interno com zoom / rolável no contêiner, como tela no powerpoint)? É possível de alguma forma?
Boris Burkov #
1
@YazidErman, esta solução depende do flexbox, portanto não, apenas o suporte ao IE 10 e superior ou qualquer outro navegador moderno caniuse.com/#search=flexbox O Flexbox é ótimo onde é suportado, mas não está em todo lugar. A tabela de exibição e a célula da tabela são provavelmente a melhor solução, o contêiner só precisa ser tabela, o elemento centralizado é envolvido com um elemento com a célula da tabela de exibição e pode ser centralizado, como algumas outras respostas apontam aqui.
21816 shaunhusain
1
Por que isso foi tão difícil para eu encontrar>. <Obrigado pela resposta! Posso confirmar que isso está funcionando para mim em um cenário em que outra resposta não funcionou.
Michael McKenna
1
Útil Guia de truques CSS em flexbox depois olhar para a align-itemsseção
icc97
1
Em 2020, podemos usar o flexbox caniuse.com/#feat=flexbox
tonygatta
116

Eu usei esse código muito simples:

HTML:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

Obviamente, se você usa um .classou um #id, o resultado não será alterado.

user2346571
fonte
3
Aqui está um exemplo completo de todas as nove possibilidades de alinhamentos (top-meio-fundo e de centro-esquerda-direita): jsfiddle.net/webMac/0swk9hk5
webMac
Em 2020, podemos usar o flexbox caniuse.com/#feat=flexbox
tonygatta
funciona perfeito para mim
huynq0911 29/03
49

Funcionou para mim:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}
Romain
fonte
9
Portanto, não é mais o elemento "bloco"?
Pacerier 12/12/12
7
Então, se você deseja alinhar horizontalmente com margin : 0 auto, ele não funcionará por causa da funçãodisplay: table-cell
Ortomala Lokni
48
 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }
Sameera Prasad Jayasinghe
fonte
7
Penso que esta solução é a mais rápida e fácil de entender. Talvez seja porque eu não fui paciente o suficiente para encontrar a resposta selecionada. Flexbox todas as coisas!
Modulitos 14/08/19
1
A adição de justify-content: centercorrigiu minha falta de centralização horizontal
Samuel Slade
22

Uma técnica de um amigo meu:

HTML:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

DEMO aqui

abernier
fonte
1
Esta técnica é descrita em mais detalhe aqui: css-tricks.com/centering-in-the-unknown
nerdess
18

Para posicionar elementos de bloco no centro (funciona no IE9 e acima), é necessário um invólucro div:

.vcontainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
Blacksonic
fonte
2
Este método pode fazer com que os elementos fiquem embaçados devido ao elemento ser colocado em um "meio pixel". Uma solução para isso é definir a perspectiva do elemento. transformar: perspectiva (1px) translateY (-50%);
Simon
16

Todos eles precisam estar alinhados verticalmente dentro da div

Alinhado como ? Partes superiores das imagens alinhadas com a parte superior do texto?

Uma das imagens precisa ser posicionada absoluta dentro da div.

Absolutamente posicionado em relação ao DIV? Talvez você possa esboçar o que está procurando ...?

A fd descreveu as etapas para o posicionamento absoluto, além de ajustar a exibição do H1elemento para que as imagens apareçam alinhadas com ele. Para isso, vou acrescentar que você pode alinhar as imagens usando o vertical-alignestilo:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

... isso colocaria o cabeçalho e as imagens juntos, com as bordas superiores alinhadas. Existem outras opções de alinhamento; veja a documentação . Também é recomendável descartar o DIV e mover as imagens dentro do H1elemento - isso fornece valor semântico ao contêiner e elimina a necessidade de ajustar a exibição do H1:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>
Shog9
fonte
15

Use esta fórmula e funcionará sempre sem rachaduras:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */
<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

Anita Mandal
fonte
2
Eu nunca vi no css esse tipo de seletor "#outer [id]". O que isso deve fazer? E se eu tiver aula em vez de id?
Alexa Adrian
12

Quase todos os métodos precisam especificar a altura, mas geralmente não temos alturas.
Então, aqui está um truque CSS3 de 3 linhas que não exige saber a altura.

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

É suportado até no IE9.

com seus prefixos de fornecedor:

.element {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Fonte: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Shadoweb
fonte
mas isso parece funcionar apenas quando a altura do pai do elemento é fixa. a propriedade 'top' com valor percentual só funciona no contêiner com altura fixa, correto?
Ucdream
Sim, funciona apenas em alguns casos, tive problemas mais tarde com esses métodos ... O mais importante é ter o máximo de possibilidades possível e, assim que você precisar, teste todos eles até obter o bom, porque todos os métodos tem coisas que não funciona em um caso específico ...
Shadoweb
12

De duas maneiras, você pode alinhar elementos vertical e horizontalmente

  1. Bootstrap 4
  2. CSS3

insira a descrição da imagem aqui

1. Bootstrap 4.3.X

para alinhamento vertical: d-flex align-items-center

para alinhamento horizontal: d-flex justify-content-center

.container {
    height: 180px;
    width:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center bg-info container">
  <div class="bg-light p-2">I am in Center</div>
</div>

2. CSS3

.container {
    display: flex;
    align-items: center;  // verticall center
    justify-content: center; // horizontally center

    background-color: #17a2b8;
    height: 180px;
    width:100%;
}

.child {
  background-color: #f8f9fa;
  padding: 0.5rem;
}
<div class="container">
  <div class="child">I am in Center</div>
</div>

WasiF
fonte
1
Ambas as formas são basicamente as mesmas, pois o Bootstrap usa os mesmos atributos flexíveis em suas classes.
Mx.
Bootstrap não é mágico. Está sujeito às mesmas limitações de CSS que afetam a todos. Está apenas escondendo o que faz da média. do utilizador.
JasonGenX 24/01
10

Meu truque é colocar dentro da div uma tabela com 1 linha e 1 coluna, definir 100% da largura e altura e a propriedade vertical-align: middle.

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

Fiddle: http://jsfiddle.net/joan16v/sbqjnn9q/

joan16v
fonte
7
Essa parece a melhor maneira de evitar muitos coçar a cabeça. Ainda estou confuso sobre o porquê do CSS não ter um padrão de alinhamento vertical.
Kokodoko
5

# 3 maneiras de fazer div filho central em um div pai

  • Método de posicionamento absoluto
  • Método Flexbox
  • Método de transformação / conversão

    insira a descrição da imagem aqui

    Demo

/* 1st way */
.parent1 {
  background: darkcyan;
   width: 200px;
   height: 200px;
   position: relative;
}
.child1 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px;
}

/* 2nd way */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  height: 200px;
  width: 200px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}

/* 3rd way */
.parent3 {
  position: relative;
  height: 200px;
  width: 200px;
  background: darkcyan;
}
.child3 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="parent1">
  <div class="child1"></div>
</div>
<hr />

<div class="parent2">
  <div class="child2"></div>
</div>
<hr />

<div class="parent3">
  <div class="child3"></div>
</div>

Vahid Akhtar
fonte
4

Usando CSS no centro vertical, é possível deixar os contêineres externos agirem como uma tabela e o conteúdo como uma célula da tabela. Nesse formato, seus objetos permanecerão centralizados. :)

Aninhei vários objetos no JSFiddle por exemplo, mas a ideia principal é a seguinte:

HTML

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS

 .circle {
   /* act as a table so we can center vertically its child */
   display: table;
   /* set dimensions */
   height: 200px;
   width: 200px;
   /* horizontal center text */
   text-align: center;
   /* create a red circle */
   border-radius: 100%;
   background: red;
 }

 .content {
   /* act as a table cell */
   display: table-cell;
   /* and now we can vertically center! */
   vertical-align: middle;
   /* some basic markup */
   font-size: 30px;
   font-weight: bold;
   color: white;
 }

O exemplo de vários objetos:

HTML

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

Resultado

Resultado

https://jsfiddle.net/martjemeyer/ybs032uc/1/

Henk-Martijn
fonte
3

Por padrão, h1 é um elemento do bloco e será renderizado na linha após a primeira img e fará com que a segunda img apareça na linha após o bloco.

Para impedir que isso ocorra, você pode definir o h1 para ter um comportamento de fluxo embutido:

#header > h1 { display: inline; }

Quanto ao posicionamento absoluto do img dentro da div , você precisa definir a div que contém para ter um "tamanho conhecido" antes que isso funcione corretamente. Na minha experiência, você também precisa alterar o atributo position do padrão - position: relative funciona para mim:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

Se você conseguir fazer isso funcionar, tente remover progressivamente os atributos de altura, largura e posição do div.header para obter os atributos mínimos necessários para obter o efeito desejado.

ATUALIZAR:

Aqui está um exemplo completo que funciona no Firefox 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>
Mike Tunnicliffe
fonte
4
Devo observar que, por vezes, ter o DOCTYPE correto pode fazer grandes diferenças na maneira como o CSS será renderizado, especialmente no Internet Explorer. Eu recomendo que você escolha um DOCTYPE conhecido por se alinhar com um modo de padrões estritos, para que você possa esperar um comportamento mais consistente entre os navegadores.
Mike Tunnicliffe
2
Eu não 'espera' qualquer consistência entre os navegadores .. única maneira de ter certeza é de teste: /
Cocowalla
3

Podemos usar um cálculo de função CSS para calcular o tamanho do elemento e, em seguida, posicionar o elemento filho de acordo.

Exemplo de HTML:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

E CSS:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;

}
.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}
a {
    color: white;
    text-decoration: none;
}

Demonstração criada aqui: https://jsfiddle.net/xnjq1t22/

Esta solução funciona bem com recursos responsivos div heightewidth também.

Nota: A função calc não é testada quanto à compatibilidade com navegadores antigos.

Dashrath
fonte
3

Hoje, encontrei uma nova solução alternativa para alinhar verticalmente várias linhas de texto em uma div usando CSS3 (e também estou usando o sistema de grade de bootstrap v3 para embelezar a interface do usuário), que é a seguinte:

.immediate-parent-of-text-containing-div{
    height: 50px;         /* or any fixed height that suits you.*/
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

De acordo com meu entendimento, o pai imediato do elemento que contém o texto deve ter alguma altura. Espero que ajude você também. Obrigado!

Shivam
fonte
Solução muito limpa. Este funcionou bem para mim.
Akalonda
2

Minha nova maneira favorita de fazer isso é com uma grade CSS:

/* technique */

.wrapper {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}

/* visual emphasis */

.wrapper {
  border: 1px solid red;
  height: 180px;
  width: 400px;
}

img {
  width: 100px;
  height: 80px;
  background: #fafafa;
}

img:nth-child(2) {
  height: 120px;
}
<div class="wrapper">
  <img src="https://source.unsplash.com/random/100x80/?bear">
  <img src="https://source.unsplash.com/random/100x120/?lion">
  <img src="https://source.unsplash.com/random/100x80/?tiger">
</div>

Stephen
fonte
1

Basta usar uma tabela de uma célula dentro da div! Basta definir a altura da célula e da tabela e com até 100% e você pode usar o alinhamento vertical.

Uma tabela de uma célula dentro da div lida com o alinhamento vertical e é compatível com versões anteriores da Idade da Pedra!

Joel Moses
fonte
0

Uso a seguinte solução (sem posicionamento e sem altura de linha) há mais de um ano, que também funciona com o IE 7 e 8.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>
Arsh
fonte
0

Esta é minha solução pessoal para um elemento i dentro de uma div

Exemplo JSFiddle

HTML

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}
danigonlinea
fonte
0

Para mim, funcionou desta maneira:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

O elemento "a" convertido em um botão, usando as classes Bootstrap, e agora está centralizado verticalmente dentro de uma "div" externa.

BernieSF
fonte
0

usando o display flex, primeiro você precisa envolver o contêiner do item que deseja alinhar.

<div class="outdiv">
      <div class="indiv">
         <span>test1</span>
         <span>test2</span>
      </div>
    </div>

aplique o css a seguir ao wrapper div ou outdiv no meu exemplo

.outdiv {
    display: flex;
    justify-content:center;
    align-items:center;
}
Dennis Don
fonte
As respostas apenas de código são desencorajadas. Por favor, adicione algumas explicações sobre como isso resolve o problema ou como isso difere das respostas existentes. Da avaliação
Nick
-3

Só isso:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

Uma tabela de uma célula dentro da div lida com o alinhamento vertical e é compatível com versões anteriores da Idade da Pedra!

Joel Moses
fonte
-3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>
pr0gg3r
fonte
-4

Aqui está apenas outra abordagem (responsiva):

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz/

Peter Mortensen
fonte
-4

Eu sou um cara do .NET que acabou de entrar em programação na web. Eu não usei CSS (bem, um pouco). Usei um pouco de JavaScript para realizar a centralização vertical junto com a função .css do jQuery.

Estou apenas postando tudo do meu teste. Provavelmente não é muito elegante, mas funciona até agora.

script.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script type="application/javascript">
            function centerElementVertically(id) {
                var btnDivHeight = $(id).outerHeight();
                var prnt = $(id).parent();
                var parentHeight = prnt.outerHeight();

                var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
                var newPct = newTop / parentHeight+'%;';

                $(id).css({top: newTop});
            }

            function showAlert(){
                alert("alert");
            }

            $(window).load(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            });

            $(window).resize(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            })
        </script>

        <style>
            #div1 {
                position:relative;
                height: 33%;
                background-color: red;
                overflow: hidden;
            }
            #buttonLeft {
                position: relative;
                float:left;
                width:50%;
                height:20%;
                background-color: cornsilk;
            }
            #buttonRight {
                position: relative;
                float:right;
                width:50%;
                height:50%;
                background-color: darkorchid;
            }
            #testerbtn {
                position: absolute;
            }
            body {
                background-color: aqua;
            }
        </style>

        <body>
            <div id="div1">
                <div id="buttonLeft">
                    <button id="testerbtn">tester</button>
                </div>
                <div id="buttonRight"></div>
            </div>
        </body>
    </head>
</html>
tronioso
fonte
7
Você está ensinando novos desenvolvedores da web a fazer coisas erradas, HTML é para definir conteúdo, CSS é para estilizar o HTML e JavaScript é para manipular os dois em tempo de execução, dependendo das condições. Mistura-se os pode levar rapidamente a espaguete e código intensivo desempenho
OverCoder
-8
<div id="header" style="display: table-cell; vertical-align:middle;">

...

ou CSS

.someClass
{
   display: table-cell;
   vertical-align:middle;
}

Cobertura do navegador

dimarzionista
fonte
1
A propriedade vertical-align não se aplica, pois a div é exibida: block por padrão e nada parece ter sido feito para alterá-lo.
Quentin
3
Aparentemente, a exibição foi atualizada para table-cell, o que dá vertical-align: middle;certo. Melhor ainda, ele funciona sem a necessidade de uma div de wrapper / buffer aninhado e funciona para texto e imagens (ou ambas), e você não precisa alterar as propriedades da posição.
MSpreij
3
Este funciona. Altera a exibição para célula da tabela, que recebe a propriedade de alinhamento vertical. Não faço ideia por que as pessoas votam nisso.
texasbruce
1
Sim, até onde eu sei, essa é a maneira menos invasiva de centralizar qualquer coisa verticalmente em uma div. +1
Pma
Ok, talvez eu tenha sido rápido demais com minhas conclusões ... Adicionando exibição: quebra de célula de tabela margem de div e adicionalmente borda é exibida fora de div, borda combinada com raio de borda exibe cantos arredondados dentro da área de
divisória