ASP.NET + CSS - Comment centrer les éléments au milieu de la page Web verticalement et horizontalement?

Question

Mon formulaire Web est assez simple. Il doit avoir trois lignes d'éléments texte/ASP.NET. La page principale a un en-tête et un pied de page. Je dois centrer ces trois lignes au milieu de la page verticalement et horizontalement, surtout si le fond change. Comment est-ce que je fais cela avec CSS?

Answer 1

L'alignement horizontal des objets est simple. Si l'élément a un fixe avec lui donner le CSS suivant:

.element 
{ 
     margin: 0 auto; 
} 

Cela indique l'élément d'avoir 0 haut et en bas et auto marin-calculer la marge à gauche et à droite.

Il existe un moyen de centrer verticalement les éléments appelés dead center. Il utilise un décalage de 50% du haut de la page et une marge négative pour amener le contenu au centre (verticalement). L'inconvénient est que votre élément a besoin d'une taille fixe (hauteur et largeur).

Answer 2

Dans votre page maître, vous voulez un conteneur et un centre, alors vous aurez besoin d'un div pour le contenu principal. le code brut serait quelque chose comme:

<div id="center"> 
    <div id="main"> 
     <p>This text is perfectly vertically and horizontally centered.</p> 
    </div><!-- end #main --> 
</div><!-- end #center --> 

<style> 
    #center { position: absolute; top: 50%; width: 100%; height: 1px; overflow: visible } 
    #main { position: absolute; left: 50%; width: 720px; margin-left: -360px; height: 540px; top: -270px } 
</style> 

Ceci utilise la même approche que celle proposée par Damien. Il a tendance à être le seul moyen d'accomplir avec CSS seul. Vous pouvez probablement mieux résoudre cela avec l'utilisation de JavaScript/jQuery.

Answer 3

C'est ce qui a fonctionné pour moi:

<style type="text/css"> 
    .auto-style1 {text-align:center;} 
</style>