<div> öğesini ekranın ortasına yerleştirme

134

Ekran boyutundan bağımsız olarak ekranın ortasına bir <div>(veya a <table>) öğesi yerleştirmek istiyorum . Diğer bir deyişle, 'üst' ve 'alt' solda kalan boşluk eşit, 'sağ' ve 'sol' kenarlarda soldaki boşluk eşit olmalıdır. Bunu sadece CSS ile başarmak istiyorum.

Aşağıdakileri denedim ama çalışmıyor:

 <body>
  <div style="top:0px; border:1px solid red;">
    <table border="1" align="center">
     <tr height="100%">
      <td height="100%" width="100%" valign="middle" align="center">
        We are launching soon!
      </td>
     </tr>
    </table>
  </div>
 </body>

Not: Öğenin (veya ) web sitesinde kaydırılıp kaydırılmaması
her iki şekilde de iyidir . Sadece sayfa yüklendiğinde ortalanmasını istiyorum.<div><table>

javascript css html

— sumit
kaynak

1

<div> sayfanın ortasına nasıl hizalanır?

— öğesinin

Merhaba Purmou, bahsettiğiniz soru sayfanın ortasına konumlandırmak için mi, yani sol ve sağ taraf eşit boşluk - üst ve alt boşluk eşit değil!

— sumit

1

Bir

— Div'i

olası yinelenen How bir div bir div ortalamak için - yatay?

— bjb568

201

Sabit bir genişliğiniz ve yüksekliğiniz varsa kolay yol:

#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

Lütfen satır içi stilleri kullanmayın! İşte çalışan bir örnek http://jsfiddle.net/S5bKq/ .

— Einstein
kaynak

13

Dinamik bir yükseklik arayanlar için: stackoverflow.com/questions/396145/…

— pulkitsinghal

1

@ woho87 neden satır içi stilleri kullanmıyorsunuz? iyi bilinen nedenlerden dolayı mı yoksa spesifik örnek için bilmem gereken başka bir şey var mı?

— Sharky

@KatrinRaimond iyi bilinen nedenlerden ötürü, burada stackoverflow.com/questions/2612483/… ve burada webdesign.about.com/od/css/a/aa073106.htm belgelenmiştir .

— Alex

Ancak, divElement'in üstünü '%' biriminde ayarlamak, divElement ilgili bir öğenin içine yerleştirilmediği sürece bölmenin dikey alanı kaplamasına neden olur.

— sudip

konum: sabit mi yoksa konum: mutlak mı?

— Kurkula

151

Günümüzde dönüşümler her yerde daha yaygın olarak destekleniyorsa, bunu pop-up'ın genişliğini / yüksekliğini bilmeden yapabilirsiniz.

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Kolay! JSFiddle burada: http://jsfiddle.net/LgSZV/

Güncelleme: Çıkış https://css-tricks.com/centering-css-complete-guide/ CSS merkezleme üzerinde oldukça kapsamlı bir rehber için. Bu yanıta ekleyerek, çok fazla göze çarpıyor gibi görünüyor.

— XwipeoutX
kaynak

1

Açılır penceredeki içerik kullanılıyorsa overflow:auto, IE9'da kaydırma işlemi bozulur. :(

— joescii

2

Pek yaygın değil. IE8 , tarayıcı paylaşımının% 20'sini hala gösteriyor ve desteklemiyor . Bu yüzden bunu yalnızca IE9 + için alın.

— fotanus

7

+1, yükseklik ve genişlik belirtmeniz veya Javascript kullanmanız gerekmediği durumlarda tek çözüm olduğu için.

— Jan Derk

@fotanus geliştiriciler IE 9'u desteklemeyi bıraktığında <kullanıcılar tarayıcılarını ya taşır ya da günceller.

— Diego Vieira

@DIegoVieira bu maalesef işler böyle yürümüyor. Müştereklerin trajedisine bakın . Bu yüzden insanlar IE8'i desteklemeye devam edecek çünkü bu payı kaybetmek istemiyorlar ve insanlar işe yaradığı için kullanmaya devam edecek.

— fotanus

33

Genişliği ve yüksekliği ayarlayın ve iyisiniz.

div {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

Öğe boyutlarının esnek olmasını istiyorsanız (ve eski tarayıcıları umursamıyorsanız), XwipeoutX'in cevabına gidin .

— Erik Aigner
kaynak

1

Bu en temiz ve en basit cevaptır ve aynı zamanda mobil uyumludur. +1

— Rust

22

Herhangi bir nesne için çalışacaktır. Boyutu bilmeseniz bile:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

— luminousmen
kaynak

17

Şimdi, HTML 5 ve CSS 3 ile daha kolay:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body > div {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
            }
        </style>
    </head>
    <body>
        <div>
            <div>TODO write content</div>
        </div>
    </body>
</html>

— Daniel De León
kaynak

12

Sabit divsadece mutlak bir konumunuz varsa, bu konum yüksekliğin ve genişliğin yarısının sırasıyla üstten% 50'sinde ve% 50 solunda ve üstte ve solunda negatif kenar boşluğudur. İhtiyaçlarınıza göre ayarlayın:

div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 300px;
    margin-left: -250px;
    margin-top: -150px;
}

— elclanrs
kaynak

10

Esnek kullanın . Çok daha basittir ve bedeniniz ne olursa olsun işe yarar div:

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

Snippet'i genişlet

— Caner
kaynak

3

Bunu CSS'de yapardım:

div.centered {
  position: fixed; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

sonra HTML'de:

<div class="centered"></div>

— Eduardo Lago Aguilar
kaynak

0

bunu dene

<table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;">
 <tr>
  <td>
   <div style="text-align: left; display: inline-block;">
    Your Html code Here
   </div>
  </td>
 </tr>
</table>

Veya bu

<div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table">
 <div style="display: table-row">
  <div style="display: table-cell; vertical-align:middle;">
   <div style="text-align: left; display: inline-block;">
    Your Html code here
   </div>
  </div>
 </div>
</div>

— Dali
kaynak

0

Çözüm arayan biri varsa,

Bunu buldum,

Bulduğum en iyi çözüm bu!

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

http://dabblet.com/gist/2872671

Beğeneceğinizi umuyoruz!

— Christopher Atwood
kaynak

0

Merkezde görüntüleme bloğu için başka bir kolay ve esnek yaklaşım: line-heightve ile yerel metin hizalamasını kullanma text-align.

Çözüm:

.parent {
    line-height: 100vh;        
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
}

Ve html örneği:

<div class="parent">
  <div class="child">My center block</div>
</div>

Tam div.parentekran yaparız ve tek çocuğu div.childmetin olarak hizalanır display: inline-block.

Avantajları:

esneklik, mutlak değerler yok
yeniden boyutlandırma desteği
mobil cihazda iyi çalışıyor

JSFiddle'da basit bir örnek: https://jsfiddle.net/k9u6ma8g

— Pavel Shorokhov
kaynak

0

Mutlak pozisyon kullanmayan alternatif çözüm:
Çok sayıda pozisyon mutlak cevabı görüyorum. Başka bir şeyi bozmadan mutlak konumu kullanamazdım. Öyleyse, bunu yapamayanlar için de yaptığım şey:
https://stackoverflow.com/a/58622840/6546317 (başka bir soruya yanıt olarak yayınlanmıştır).

Çözüm, yalnızca dikey merkezlemeye odaklanıyor çünkü çocuk öğelerim zaten yatay olarak ortalanmıştı, ancak bunları başka bir şekilde yatay olarak ortalayamazsanız aynısı uygulanabilir.

— reddtoric
kaynak

-2

bunu dene:

width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;

— user3423956
kaynak

2

Bu, kabul edilen cevapla etkin bir şekilde aynı

— apaul

evet, ama burada üst ve sol kenar boşluğunun işleyişini açıklıyorum ... birisi bunu bilmiyor ....

— user3423956

1

O halde, ikinci cevapla

— apaul