Come centrare verticalmente il contenuto con altezza variabile all'interno di un div?

Question

Qual è il modo migliore per centrare verticalmente il contenuto di un div quando l'altezza del contenuto è variabile.Nel mio caso particolare, l'altezza del div del contenitore è fissa, ma sarebbe fantastico se esistesse una soluzione che funzioni anche nei casi in cui il contenitore ha un'altezza variabile.Inoltre, mi piacerebbe una soluzione senza, o con un utilizzo minimo, di hack CSS e/o markup non semantico.

Answer 1

Basta aggiungere

position: relative;
top: 50%;
transform: translateY(-50%);

al div interno.

Ciò che fa è spostare il bordo superiore del div interno a metà altezza del div esterno (top: 50%;) e poi il div interno fino a metà della sua altezza (transform: translateY(-50%)).Funzionerà con position: absolute O relative.

Tieni presente che transform E translate hanno prefissi del fornitore che non sono inclusi per semplicità.

Codicepenna: http://codepen.io/anon/pen/ZYprdb

Answer 2

Questa sembra essere la migliore soluzione che ho trovato a questo problema, a condizione che il tuo browser supporti il ​​file ::before pseudoelemento: Trucchi CSS:Centrare nell'ignoto.

Non richiede alcun markup aggiuntivo e sembra funzionare molto bene.Non ho potuto usare il display: table metodo perché table gli elementi non obbediscono al max-height proprietà.

.block {
  height: 300px;
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  margin: 20px;
}

.block::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */

  /* For visualization 
  background: #808080; width: 5px;
  */
}

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
}

<div class="block">
    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my
           shoulder, said&mdash;"Did ye see anything looking like men going
           towards that ship a while ago?"</p>
    </div>
</div>

Answer 3

Questo è qualcosa che ho dovuto fare molte volte e una soluzione coerente richiede comunque l'aggiunta di un po' di markup non semantico e di alcuni hack specifici del browser.Quando avremo il supporto del browser per css 3 otterrai la centratura verticale senza peccare.

Per una migliore spiegazione della tecnica puoi guardare l'articolo da cui l'ho adattato, ma fondamentalmente comporta l'aggiunta di un elemento extra e l'applicazione di stili diversi in IE e nei browser che lo supportano position:table\table-cell su elementi non tabellari.

<div class="valign-outer">
    <div class="valign-middle">
        <div class="valign-inner">
            Excuse me. What did you sleep in your clothes again last night. Really. You're gonna be in the car with her. Hey, not too early I sleep in on Saturday. Oh, McFly, your shoe's untied. Don't be so gullible, McFly. You got the place fixed up nice, McFly. I have you're car towed all the way to your house and all you've got for me is light beer. What are you looking at, butthead. Say hi to your mom for me.
        </div>
    </div>
</div>

<style>
    /* Non-structural styling */
    .valign-outer { height: 400px; border: 1px solid red; }
    .valign-inner { border: 1px solid blue; }
</style>

<!--[if lte IE 7]>
<style>
    /* For IE7 and earlier */
    .valign-outer { position: relative; overflow: hidden; }
    .valign-middle { position: absolute; top: 50%; }
    .valign-inner { position: relative; top: -50% }
</style>
<![endif]-->
<!--[if gt IE 7]> -->
<style>
    /* For other browsers */
    .valign-outer { position: static; display: table; overflow: hidden; }
    .valign-middle { position: static; display: table-cell; vertical-align: middle; width: 100%; }
</style>

Esistono molti modi (hack) per applicare gli stili in set specifici di browser.Ho usato i commenti condizionali ma guarda l'articolo linkato sopra per vedere altre due tecniche.

Nota:Esistono modi semplici per ottenere la centratura verticale se conosci in anticipo alcune altezze, se stai cercando di centrare una singola riga di testo o in molti altri casi.Se hai maggiori dettagli, inseriscili perché potrebbe esserci un metodo che non richiede hack del browser o markup non semantico.

Aggiornamento: Stiamo iniziando a ottenere un migliore supporto del browser per CSS3, introducendo sia flex-box che trasformazioni come metodi alternativi per ottenere la centratura verticale (tra gli altri effetti).Vedere quest'altra domanda per ulteriori informazioni sui metodi moderni, ma tieni presente che il supporto del browser è ancora lacunoso per CSS3.

Answer 4

Usando il selettore figlio, ho preso L'incredibile risposta di Fadi sopra e l'ho ridotto a una sola regola CSS che posso applicare.Adesso non mi resta che aggiungere il contentCentered nome della classe agli elementi che voglio centrare:

.contentCentered {
  text-align: center;
}

.contentCentered::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -.25em; /* Adjusts for spacing */
}

.contentCentered > * {
  display: inline-block;
  vertical-align: middle;
}

<div class="contentCentered">
  <div>
    <h1>Some text</h1>
    <p>But he stole up to us again, and suddenly clapping his hand on my
      shoulder, said&mdash;"Did ye see anything looking like men going
      towards that ship a while ago?"</p>
  </div>
</div>

CodePen biforcato: http://codepen.io/dougli/pen/Eeysg

Answer 5

Il miglior risultato per me finora:

div da centrare:

position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
right: 0;
left: 0;

Answer 6

È possibile utilizzare il margine automatico.Con Flex, anche il div sembra essere centrato verticalmente.

body,
html {
  height: 100%;
  margin: 0;
}
.site {
  height: 100%;
  display: flex;
}
.site .box {
  background: #0ff;
  max-width: 20vw;
  margin: auto;
}

<div class="site">
  <div class="box">
    <h1>blabla</h1>
    <p>blabla</p>
    <p>blablabla</p>
    <p>lbibdfvkdlvfdks</p>
  </div>
</div>

Answer 7

Questa è la mia fantastica soluzione per a div con un'altezza dinamica (percentuale).

CSS

.vertical_placer{
  background:red;
  position:absolute; 
  height:43%; 
  width:100%;
  display: table;
}

.inner_placer{  
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}

.inner_placer svg{
  position:relative;
  color:#fff;
  background:blue;
  width:30%;
  min-height:20px;
  max-height:60px;
  height:20%;
}

HTML

<div class="footer">
    <div class="vertical_placer">
        <div class="inner_placer">
            <svg> some Text here</svg>
        </div>
    </div>
</div>  

Provalo tu stesso.