Wie richten DIV vertikal & horizontal center

Kann jemand mir helfen div id "loader" zu schweben in der Mitte der div-Klasse "Fenster". Danke.

<div id="someid" class="Window">
   <div id="loader"></div>
</div>

UPDATE* ich brauche, um es in der absoluten Mitte eines Blocks. Sagen wir die Klasse "Fenster" war 400px hoch. Wie bekomme ich "loader zu schweben in der Mitte (Höhe/Breite)?

Ich brauche, um es in der absoluten Mitte eines Blocks. Sagen wir die Klasse "Fenster" war 400px hoch. Wie bekomme ich "loader zu schweben in der Mitte (Höhe/Breite)?
so etwas wie das? jsfiddle.net/sfKR2 ich werde mein edit beantworten..
Schließen Fabian. SenorAmor habe es in der Nähe, was ich brauchte. Vielen Dank tho 🙂

InformationsquelleAutor Joe | 2012-02-22

  1. 6

    Gelten die folgenden CSS "loader":

    • position: relative
    • top: 50%
    • margin -: - {E}px auto auto auto

    wobei {E} ist die Hälfte der Höhe der "loader"

    Hoffe, das hilft.

    Können Sie margin -: -25% auto auto auto und egal wie groß loader ist?
    Nicht, wenn Sie immer noch wollen, dass es vertikal zentriert. Die top: 50% bewegt sich das innere div-down 50% der Höhe des übergeordneten div. Dann, die margin: -{E}px Teil bewegt sich das innere div sichern. Wir verschieben es die Hälfte seiner Höhe, so bleibt es vertikal zentriert.
    Dies scheint nicht gut zu funktionieren, wenn verwendet, innen ein wrapper, der hat die Breite und Höhe auf 100% gesetzt.

    InformationsquelleAutor SenorAmor

  2. 3
    #someid.Window{
   //give this some width
   width: 100%
}

#loader{
    //give width and margin auto on the sides
    width: 100px;
    margin: 0 auto;
}
    Ich brauche, um es in der absoluten Mitte eines Blocks. Sagen wir die Klasse "Fenster" war 400px hoch. Wie bekomme ich "loader zu schweben in der Mitte (Höhe/Breite)?
    k, können Sie Ihre Frage zu erwähnen, dass Sie möchten, um die Mitte der #loader div horizontal und vertikal.

    InformationsquelleAutor ggreiner

  3. 0

    Fügen Sie diese zu Ihrem css:

    #loader {
  width: 123px;
  margin:0 auto;
}

    Damit wird Ihre linken und rechten Ränder werden automatisch berechnet.

    InformationsquelleAutor Bruno Silva

  4. 0

    schreiben:

    .window{
    height:400px;
    width:400px;
    background:red;
    vertical-align:middle;
    line-height:400px;
    text-align:center;
}
#loader{
    width:20px;
    height:20px;
    background:green;
    display:inline-block;
    vertical-align:middle;
}

    Überprüfen Sie diese http://jsfiddle.net/dxPfz/

    InformationsquelleAutor sandeep

  5. 0

    http://jsfiddle.net/sfKR2/

    #someid {
    width:200px;
    height:200px;
}
#loader {
    position: relative;
    height:80px;
    width: 80px;
    top: 50%;
    margin-top: -40px; /* half of the height */
    margin-left: auto;
    margin-right: auto;
}

    InformationsquelleAutor Fabian Pirklbauer

Schreibe einen Kommentar