Sayfa ekrandan daha büyük olduğunda div ekranın ortasına nasıl yerleştirilir

141

Merhaba ben ekranın ortasında bir div almak için aşağıdakine benzer bir şey kullanıyorum:

<style type="text/css"> 
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

</style>


<div id="mydiv">Test Div</div>

Ancak bununla ilgili sorun, öğeyi ekranın değil sayfanın ortasına yerleştirmesidir. Bu yüzden sayfa birkaç ekran yüksekliğinde ve sayfanın üstündeysem (parçanın üst kısmı ekranda görüntülenir) div'ın görünmesini sağladığımda ekranda bile değil. Görüntülemek için aşağı kaydırmanız gerekir.

Birisi bana ekranın ortasında nasıl görüneceğini söyleyebilir mi?

— Kodlayıcı 2
kaynak

Bir test sayfasında tam olarak bu kodu test ettim ve div'ı sayfada mükemmel bir şekilde ortaladı, hatta <br />denemeden ve aşağı itmeden önce yaklaşık 100 ile . Belki de DIV değerlerinin üzerine yazan veya DIV'nizi bu sorunlara neden olan bir şey olup olmadığını görmek için kodunuzun geri kalanını kontrol etmeyi deneyin.

— Eli

269

sadece ekleyin position:fixedve aşağı kaydırsanız bile görünümde tutacaktır. başta göremezseniz http://jsfiddle.net/XEUbc/1/

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

— Hüseyin
kaynak

1

Hayat kurtarıcısınız .. Eleman dönüşüm ölçeği uygulanmış olsa bile basit çözüm iyi çalışır ..

— Vinnie

91

Bunun basit bir çözüm olduğunu düşünüyorum:

<div style="
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: #f3f3f3;">Full Center ON Page
</div>

Snippet'i genişlet

— user2684935
kaynak

7

bu yaklaşım onaylanmış cevaptan çok daha iyidir

— Viacheslav Dobromyslov

2

Bunu sevdim, ancak bu "eski" tarayıcıda çalışıyor mu?

— BernaMariano

14

Dönüşüm kullanın;

<style type="text/css">
    #mydiv {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

Javascript Çözümü:

var left = (screen.width / 2) - (530 / 2);
var top = (screen.height / 2) - (500 / 2);
var _url = 'PopupListRepair.aspx';
window.open(_url, self, "width=530px,height=500px,status=yes,resizable=no,toolbar=no,menubar=no,left=" + left + ",top=" + top + ",scrollbars=no");

— Erdoğan
kaynak

5

Sadece koy margin:auto;

#mydiv {
    margin:auto;
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

<div id="mydiv">Test Div</div>

5

Bunu dene.

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

— Chandan Sharma
kaynak

1

Bu daha yararlı olduğunu düşünüyorum çünkü üst öğeye herhangi bir stil uygulamanız gerekmez.

— canbax

3

position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

Bu benim için çalıştı

— İbrahim
kaynak

2

Bu teknik olarak doğru olsa da, bunun neden bağlam için sorunu çözdüğüne dair kısa bir açıklama eklemek istiyorsunuz

— drneel

2

Kısa cevap, Sadece ekleyin position:fixedve bu sorununuzu çözecektir

— Parth
kaynak

1

<html>
<head>
    <style type="text/css">

#mydiv {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:100px;
    height:200px;
    margin:auto;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
    </style>
</head>
<body>
<div id="mydiv">Maitrey</div>
</body>
</html>

— Maitrey Malve
kaynak

Soru bana röportajda "ekranın div merkezini nasıl hizaladınız?"

— Maitrey Malve

1

Bunun için çalışma örneği aşağıdadır.

Bu, web sayfasını yeniden boyutlandırırsanız veya herhangi bir boyutta yüklerseniz merkez konumunu ele alır.

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

Snippet'i genişlet

Yukarıdaki örnek yükleme div daima merkezde olacaktır.

Bunun size yardımcı olacağını umuyoruz :)

— Vikash Pandey
kaynak

1

Bir etiketi ekranın ortasına veya üst etiketine yerleştirmenin iki yolu:

Pozisyonları kullanma:

Üst etiketi Set positioniçin relative(hedef etiketi bir üst etiketi varsa) ve sonra böyle hedef etiketi stili ayarlayın:

#center {
  ...  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Flex kullanarak:

Üst etiket stili şöyle görünmelidir:

#parent-tag {
  display: flex;
  align-items: center;
  justify-content: center;
}

— Alex Jolig
kaynak

0

Komut dosyanızın sayfasında ...

    $('.a-middle').css('margin-top', function () {
        return ($(window).height() - $(this).height()) / 2
    });

Div içinde bir orta sınıf kullanın ...

   <div class="a-middle">

— Antony Jack
kaynak

-1

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

Snippet'i genişlet

— Lăng Minh
kaynak

-1

FLEX KULLANIMI

display: flex;
height: 100%;
align-items: center;
justify-content: center;

— ASIR THERANS RAJA M
kaynak

Bu, içeriği ekrana değil ana öğeye veya sayfaya ortalar.

— Sean

-2

width:30em;
position: static;
margin: 0px auto 0px auto;
padding: 0px;

— Lukash
kaynak

Biraz açıklama ekle

— Pankaj Makwana

-4

Bunun için ekran boyutunu tespit etmeniz gerekir. Bu CSS veya HTML ile mümkün değildir; JavaScript'e ihtiyacınız var. İşte pencere özelliklerindeki Mozilla Geliştirici Merkezi girişi https://developer.mozilla.org/en/DOM/window#Properties

Mevcut yüksekliği ve konumu uygun şekilde tespit edin.

— Scott Radcliff
kaynak