webentwicklung-frage-antwort-db.com.de

Wie zentriere ich das HTML-Element im Browserfenster?

Wie kann ich ein HTML-Element, etwa div, in die Mitte eines Browserfensters (keine Seite, nicht Bildschirm) einfügen? Unabhängig von der Browserfenstergröße, der Bildschirmauflösung, dem Layout der Symbolleiste usw. Ich möchte, dass es sich in der Mitte des Browserfensters befindet.

Vielen Dank

htmlcenter
53
Kamarey

Ich wunderte mich, dass niemand über Position = fixiert sagte. Es macht genau das, was ich seit 7 in allen "menschlichen" Browsern und IE gefragt habe und funktioniert.

11
Kamarey

Dazu müssen Sie die Größe des zu zentrierenden Elements kennen. Jede Messung reicht aus (d. H. Px, em, Prozent), muss jedoch eine feste Größe haben.

Die CSS wird wie folgt aussehen:

 // Replace X and Y with a number and u with a unit. do calculations
 // and remove parens
.centered_div {
   width: Xu;
   height: Yu;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -(X/2)u;
   margin-top: -(Y/2)u;
}

Bearbeiten : Dies zentriert sich im Ansichtsfenster. Sie können im Browserfenster nur mit JavaScript zentrieren. Das könnte aber trotzdem gut genug sein, da Sie wahrscheinlich eine Popup-/Modal-Box anzeigen möchten.

36
PatrikAkerstrand
div#wrapper {
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
13
Saman Sadeghpour

Dies ist vollständig mit nur CSS möglich - kein JavaScript erforderlich: Hier ist ein Beispiel

Hier ist der Quellcode hinter diesem Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>  
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Dead Centre</title>  
<style type="text/css" media="screen"><!--
body 
    {
    color: white;
    background-color: #003;
    margin: 0px
    }

#horizon        
    {
    color: white;
    background-color: transparent;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 1px;
    overflow: visible;
    visibility: visible;
    display: block
    }

#content    
    {
    font-family: Verdana, Geneva, Arial, sans-serif;
    background-color: transparent;
    margin-left: -125px;
    position: absolute;
    top: -35px;
    left: 50%;
    width: 250px;
    height: 70px;
    visibility: visible
    }

.bodytext 
    {
    font-size: 14px
    }

.headline 
    {
    font-weight: bold;
    font-size: 24px
    }

#footer 
    {
    font-size: 11px;
    font-family: Verdana, Geneva, Arial, sans-serif;
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 20px;
    visibility: visible;
    display: block
    }

a:link, a:visited 
    {
    color: #06f;
    text-decoration: none
    }

a:hover 
    {
    color: red;
    text-decoration: none
    }

--></style>
</head>
<body>
<div id="horizon">
    <div id="content">
        <div class="bodytext">
        This text is<br>
        <span class="headline">DEAD CENTRE</span><br>
        and stays there!</div>
    </div>
</div>
<div id="footer">
    <a href="http://www.wpdfd.com/editorial/thebox/deadcentre4.html">view construction</a></div>
</body>
</html>
11
Cuga

Hier ist:

  • Nur HTML + CSS-Lösung - kein JavaScript erforderlich
  • Es ist nicht erforderlich, dass Sie die Inhaltsgröße im Voraus kennen
  • Der Inhalt steht im Mittelpunkt der Fenstergröße

Und das Beispiel:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML centering</title>

        <style type="text/css">
        <!--
        html, body, #tbl_wrap { height: 100%; width: 100%; padding: 0; margin: 0; }
        #td_wrap { vertical-align: middle; text-align: center; }
        -->
        </style>
    </head>

    <body>
        <table id="tbl_wrap"><tbody><tr><td id="td_wrap">
        <!-- START: Anything between these wrapper comment lines will be centered -->


<div style="border: 1px solid black; display: inline-block;">
This content will be centered.
</div>

        <!-- END: Anything between these wrapper comment lines will be centered -->
        </td></tr></tbody></table>
    </body>
</html>

Schauen Sie sich die Original-URL für vollständige Informationen an: http://krustev.net/html_center_content.html

Sie können mit diesem Code machen, was Sie möchten. Die einzige Bedingung ist, dass jedes abgeleitete Werk einen Verweis auf den ursprünglichen Autor haben muss.

11
Delian Krustev

Wenn Sie die Größe des Browsers nicht kennen, können Sie den CSS-Code einfach mit folgendem Code zentrieren:

HTML Quelltext:

<div class="firstDiv">Some Text</div>

CSS-Code:

 .firstDiv {
  width: 500px;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  background-color: #F1F1F1;
 }

Dies hilft auch bei unvorhergesehenen Änderungen in der Zukunft. 

6
Anand Mohanty

Ich hatte viele Probleme beim Zentrieren und Ausrichten, bis ich Flexbox als Empfehlung in einem Leitfaden fand.

Eine vollständige Anleitung zu Flexbox

Ich werde hier aus praktischen Gründen einen Ausschnitt (der mit Chrome funktioniert) posten:

<head>
    <style type="text/css">
        html
        {
            width: 100%;
            height: 100%;
        }

        body
        {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    This is text!
</body>

Weitere Einzelheiten finden Sie in dem Artikel.

4
yaganox

Um ein Div zu zentrieren, sollten Sie den Stil anwenden

div 
{
    margin: 0 auto;
}
2
gonzohunter
<div align="center">

oder

<div style="margin: 0 auto;">
1
threadhack

Dies wird geprüft und funktioniert in allen Browsern.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <style type="text/css">
            html, body { margin: 0; padding: 0; height: 100%; }

            #outer {height: 100%; overflow: hidden; position: relative; width: 100%;}
            #outer[id] {display: table; position: static;}

            #middle {position: absolute; top: 50%; width: 100%; text-align: center;}
            #middle[id] {display: table-cell; vertical-align: middle; position: static;}

            #inner {position: relative; top: -50%; text-align: left;}
            #inner {margin-left: auto; margin-right: auto;}
            #inner {width: 300px; } /* this width should be the width of the box you want centered */
        </style>
    </head>
    <body>

        <div id="outer">
            <div id="middle">
                <div id="inner">
                    centered
                </div>
            </div>
        </div>

    </body>
</html>
1
Michal M

Ich glaube nicht, dass du das kannst. Sie können sich in der Mitte des Dokuments befinden, kennen jedoch nicht das Layout der Symbolleiste oder die Größe der Browsersteuerelemente. Sie können also im Dokument zentrieren, jedoch nicht in der Mitte des Browserfensters.

0
Pim Jager

Wenn ich Sie richtig verstanden habe, möchten Sie das Element vertikal und horizontal basierend auf dem Fenster und nicht dem Dokument zentrieren. Dies kann ein wenig schmerzhaft sein, aber Sie können Javascript verwenden, um die Fenstergröße, die Bildlaufposition, die Elementgröße usw. zu ermitteln und das Element dann in der Mitte des Fensters zu positionieren (nicht das Dokument, sondern das sichtbare Fenster).

Wenn Sie möchten, dass dieses Element beim Scrollen im Modul des Fensters verbleibt, müssen Sie das Scroll-Ereignis erfassen und die Position anpassen.

Der Code dafür ist von Browser zu Browser unterschiedlich.

0
James Conigliaro

Sie könnten ein JavaScript schreiben, um die Höhe und Breite des Fensters zu ermitteln und es zur Hälfte zu machen, um den Mittelpunkt zu finden.

Fügen Sie Ihre Sachen in einem Tag hinzu, und setzen Sie das div oben und links vom Javascript auf die Mittelpunktskoordinaten, die Sie mit Javascript gefunden haben.

Lassen Sie mich wissen, wenn Sie den Code benötigen.

0
Bhaskar

Dies sollte mit divoder Bildschirmgröße funktionieren:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

Weitere Details zu flexhier . Dies sollte auf den meisten Browsern funktionieren, siehe Kompatibilitätsmatrix hier .

0
Caner

Hoffe das hilft. Der Trick besteht darin, die absolute Positionierung zu verwenden und die oberen und linken Spalten zu konfigurieren. Natürlich hängt der "Totpunkt" von der Größe des Objekts/Divs ab, das Sie einbetten, daher müssen Sie einige Arbeiten ausführen. Für ein Anmeldefenster habe ich Folgendes verwendet - es hat auch eine gewisse Sicherheit mit max-width und max-height, die Ihnen in Ihrem Beispiel tatsächlich nützlich sein könnte. Konfigurieren Sie die Werte unten für Ihre Anforderung.

div#wrapper {
    border: 0;
    width: 65%;
    text-align: left;
    position: absolute;
    top:  20%;
    left: 18%;
    height: 50%;
    min-width: 600px;
    max-width: 800px;
}
0
Ryan Oberoi

Arbeitslösung. 

<html>
          <head>
            <style type="text/css">
                html
                {
                    width: 100%;
                    height: 100%;
                }

                body
                {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            </style>
        </head>

        <body>
            Center aligned text.(horizontal and vertical side)
        </body>
</html>
0
Vinayak

Für mich geht das :).

div.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
0
Kiry Meas