ASP.NET + CSS - Wie zentriere ich Elemente in der Mitte der Webseite vertikal und horizontal?

Question

Mein Webformular ist ziemlich einfach. Es muss drei Zeilen Text/ASP.NET-Elemente haben. Die Masterseite hat eine Kopf- und Fußzeile. Ich muss diese drei Zeilen in der Mitte der Seite vertikal und horizontal zentrieren, besonders wenn sich der Boden ändert. Wie mache ich das mit CSS?

Answer 1

Das horizontale Ausrichten der Dinge ist einfach. Wenn das Element mit geben sie die folgende CSS eine feste hat:

.element 
{ 
     margin: 0 auto; 
} 

Dieses das Element erzählt 0 oben haben und unten marin und Auto-Berechnung der Marge nach links und rechts.

Es gibt eine Möglichkeit, die Elemente dead center vertikal zu zentrieren. Es verwendet einen 50% igen Versatz vom oberen Rand der Seite und einen negativen Rand, um den Inhalt in die Mitte (vertikal) zu bringen. Nachteil ist, dass Ihr Element muss eine feste Größe (Höhe und Breite) haben.

Answer 2

In Ihrer Masterseite wollen Sie einen Container und das Zentrum, dann wollen Sie ein div für den Hauptinhalt. der rohe Code wäre etwas wie:

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

Dies ist mit dem gleichen Ansatz wie von Damien angeboten. Es ist der einzige Weg, um mit CSS allein zu erreichen. Sie können das wahrscheinlich besser mit JavaScript/jQuery lösen.

Answer 3

Dies ist, was für mich gearbeitet:

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