web-dev-qa-db-fra.com

True Center Vertical et Horizontal CSS Div

Comment est-il possible de créer un vrai navigateur div div CSS central, par exemple, à utiliser dans une page d'attente?

J'ai essayé cette astuce css 2007 -Comment centrer un objet exactement au centremais comme vous pouvez le voir sur mon JSFiddle du code, ce n'est pas 100% centre.

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;
}
csshtmlcross-browsercenter
13
Jess McKenzie

Cette technique nécessite que l'élément ait une largeur et une hauteur fixes. Vous ne définissez pas la largeur et la hauteur. Sur la base de votre bordure et de vos marges, pour la centrer, la largeur devrait être de 190 pixels et la hauteur, de 90 pixels. L'utilisation de line-height et text-align en combinaison avec une largeur et une hauteur fixes rend le texte et la bordure centrés.Essayez-le.

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;
}
9
icktoofay

Vous pouvez le faire avec du CSS pur:

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;
}

Il est important de donner des valeurs concrètes (par exemple: 300px) et non dérivées (telles que: auto ou 30%) pour width et height.

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

par exemple

<!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>
2
derWilly

Ceci est un exemple supplémentaire avec un régleur de hauteur que j'ai créé pour IE alignement vertical. La plage supplémentaire a un alignement vertical: milieu.

<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>
1
Ron Jonk

Définissez le type display de la DIV sur table-cell. Ensuite, vous pouvez utiliser vertical-align normal, comme un élément TD. 

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

Regardezthis; un article assez intelligent.

1
Alessandro Lo Verde

C'est ce que j'ai fait

<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>

J'espère que cela t'aides.

1
Frankie Law

C'est ma solution:

<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>

Cela fonctionne dans beaucoup de navigateurs. Et il n'y a pas de problème avec le contenu ajouté après la mise en page.

1
AKonst