True Center Vertical e Horizontal CSS Div

Come è possibile creare un cross saver vero centro CSS per esempio da utilizzare all'interno di una pagina di attesa?True Center Vertical e Horizontal CSS Div

Ho provato questo 2007 css trick - How To Center an Object Exactly In The Center ma come si può vedere dal mio JSFiddle del codice il suo centro non al 100%.

HTML:

<div class="center"> 
    <p>Text</p> 
</div>

CSS:

.center{ 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -100px; 
    border:5px solid black; 
}

fonte

2013-01-07 Jess McKenzie

Perché "margine: 0 auto" non è abbastanza buono? – meagar

@meagar: che si concentra solo orizzontalmente, non verticalmente. – icktoofay

Ah. La domanda dovrebbe davvero indicare che l'intenzione è di * verticalmente * centrare gli elementi. – meagar

Tale tecnica richiede l'elemento di avere una larghezza e un'altezza fissa. Non stai impostando la larghezza e l'altezza. In base al bordo e ai margini, per centrarlo, la larghezza dovrebbe essere 190 pixel e l'altezza dovrebbe essere 90 pixel. L'utilizzo di line-height e text-align in combinazione con una larghezza e un'altezza fissa rende centrato il testo e il bordo. Try it.

CSS

.center{ 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    width: 190px; 
    height: 90px; 
    line-height: 90px; 
    text-align: center; 
    margin-top: -50px; 
    margin-left: -100px; 
    border:5px solid black; 
}

fonte

2013-01-07 03:53:19 icktoofay

<div style='position:absolute; left:50%; top:50%; margin-left:(-)width_of_your_element/2px; margin-top:(-)height_of_your_element/2px'>

ad esempio

<!DOCTYPE html> 
<html> 
<body> 
<div style='border:1px solid; width:200px; height:200px; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px'>hallo</div> 
</body> 
</html>

fonte

2013-01-07 03:54:35 derWilly

Questo è quello che ho fatto

<html> 
<head> 
    <title>Page Title</title> 

    <style> 
     .center { margin:auto; width:500px; background-color:green; } 
    </style> 
</head> 
<body> 
    <div class="center"> 
     <p>Help me please</p> 
    </div> 
</body> 
</html>

Spero che questo aiuti.

fonte

2013-01-07 03:57:51

È possibile farlo con CSS puro:

html { 
    width: 100%; 
    height: 100%; 
} 
body { 
    min-width: 100%; 
    min-height: 100%; 
} 
div.centeredBlueBox { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    margin: auto; 
    width: 300px; 
    height: 200px; 
    background-color: blue; 
}

E 'importante dare concreta (ad es: 300px) e non derivato (come: auto o 30%) i valori per width e height.

fonte

2013-01-20 09:35:41

Penso che questo funziona meglio. Funziona ancora con il ridimensionamento del contenuto, senza la necessità di ricalcolare anche altre dimensioni – BananaAcid

Questa è la mia soluzione:

<div style="position: absolute; left: 50%; height: 100%;"> 
    <div style="position: relative; left: -50%; display: table; height: 100%;"> 
     <div style="display: table-cell; vertical-align: middle;"> 
      //your content here 
     </div> 
    </div> 
</div>

Funziona in un sacco di browser. E non c'è alcun problema con il contenuto aggiunto dopo il layout.

fonte

2013-07-24 08:15:13 AKonst

Questo è un esempio in più con un settaggio altezza creato per l'allineamento verticale IE. L'estensione extra ha un allineamento verticale: medio.

<style type="text/css"> 
    html, body { 
     margin: 0; 
     padding: 0; 
     overflow:hidden; 
     text-align:center; 
    } 
    html, body{ 
     height: 100%; 
    } 
    #loginContainer { 
     margin: 0 auto; 
     display: table; 
     min-width:300px; 
     text-align:left; 
     height: 85%; /* vertical align not exact in the middle */ 
    } 
    #loginContainer .label{ 
     width: 25%; 
     float:left; 
     white-space:nowrap; 
     line-height:20px; 
    } 
    #loginContainer h2{ 
     border-bottom:2px solid #B4C3E1; 
     border-width:0 0 3px; 
     padding:2px 4px; 
    } 
    .mainHeader { 
     position:absolute; 
     top:0; 
     left:0; 
     text-align:center; 
     width:100%; 
     font-size:2em; 
     white-space:nowrap; 
    } 
    .detailsText { 
     border-top:1px solid #F60; 
     margin-top:5px; 
     clear:both; 
    } 
    /* layout horizontal and vertical */ 
    .horizontalBox { 
     display: table-cell; 
     vertical-align: middle; /* not seen by IE6-7 */ 
     height: 100%; 
     white-space: nowrap; 
    } 
    .verticalBox { 
     padding: 55px 0 0 0; /* 55px height of logo */ 
    } 
    .rightText { 
     text-align:right; 
    } 
</style> 
<!--[if lte IE 8]> 
<style type="text/css"> 
    #loginContainer { 
     width:300px; /* minimum width */ 
    } 
    .horizontalBox { 
     text-align: center; 
    } 
    .verticalBox, .heightSetter { 
     display: inline-block; 
     vertical-align: middle; 
     text-align: left; 
     zoom:1; 
    } 
    .heightSetter { 
     height: 100%; 
    } 
    .verticalBox { 
     display: inline; 
     height: 0; 
    } 
    .heightSetter { 
     width: 1px; 
    } 
</style>  
<![endif]--> 
<div class="mainHeader">This is the Header content</div> 
<div id="loginContainer"> 
    <div class="horizontalBox"> 
     <div class="verticalBox"> 
      <h2>My header of the vertical box</h2> 
      <p>My Content</p> 
     </div> 
     <span class="heightSetter"></span> 
    </div> 
</div>

fonte

2013-08-14 20:38:29

Dai un'occhiata alla this; un articolo abbastanza intelligente.

fonte

2013-12-23 23:57:31

Impostare il tipo display dello DIV su table-cell. Quindi puoi utilizzare il normale vertical-align, proprio come un elemento TD.

<div style="display: table-cell; vertical-align: middle; height: 200px;"> 
Centered Text 
</div>

fonte

2014-03-20 00:59:43 kpruner

True Center Vertical e Horizontal CSS Div

risposta

Problemi correlati