Konumu ortala: sabit eleman

439

position: fixed;Dinamik bir genişlik ve yükseklikte ekrana ortalanmış bir açılır kutu yapmak istiyorum . Bunun için kullandım margin: 5% auto;. Onsuz position: fixed;yatay olarak iyi merkezlenir, ancak dikey olarak değil. Ekledikten sonra position: fixed;yatay olarak ortalanmıyor.

İşte komple set:

.jqbox_innerhtml {
    position: fixed;
    width: 500px;
    height: 200px;
    margin: 5% auto;
    padding: 10px;
    border: 5px solid #ccc;
    background-color: #fff;
}
<div class="jqbox_innerhtml">
    This should be inside a horizontally
    and vertically centered box.
</div>
Snippet'i genişlet

Bu kutuyu ekranda CSS ile nasıl ortalayabilirim?

css  css-position  centering 
— saturngod
kaynak

Yanıtlar:

606

Temelde setine ihtiyaç topve lefthiç 50%div sol üst köşesini merkezi. Merkezi div'in ortasına kaydırmak için div yüksekliğinin ve genişliğinin negatif yarısını margin-topve ayarlamanız gerekir margin-left.

Bu nedenle, bir <!DOCTYPE html>(standartlar modu) sağlandığında , bunun yapılması gerekir:

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

Dikey ve IE6 / 7 olarak eski tarayıcılar ortalama umurumda değil Veya, o zaman yerine de ekleyebilir left: 0ve right: 0öğesine bir sahip margin-leftve margin-rightbir autosabit konumlandırılmış eleman sabit bir genişliğe sahip böylece bilir nereye onun sol ve sağ ofsetler başlar. Dolayısıyla sizin durumunuzda:

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

Yine, IE'yi önemsiyorsanız bu sadece IE8 + 'da çalışır ve bu sadece yatay değil dikey olarak merkezlenir.

— BalusC
kaynak
8
Bu numarayı css-tricks.com/… 'da buldum . Ama genişliği ve yüksekliği değiştirdiğimde merkez hareket etmiyor. Ya, yükseklik ve genişliği değiştirirken sol ve sol kenar boşluklarını değiştirmeliyim.
— saturngod
2
Bilginize: bu, işleri ortada doğru bir şekilde konumlandırır, ancak maalesef kaydırma çubuklarınızı kaybedersiniz - görünüm tarafından kırpılan içeriğe, kaydırma yapsanız bile erişilemez, çünkü sabit konum görünüm alanına değil, sayfa. Şimdiye kadar bulduğum tek çözüm javascript ile.
— Groxx
3
Groxx Ben taşma özelliğini kullanarak pop bir div içinde kaydırma çubukları koyabilirsiniz düşünüyorum .
— David Winiecki
1
Ayrıca, bunun için elemanın genişliğini bilmeniz gerekir.
— Hector Ordonez
2
Ah. nm bu durumda, tabii ki tarayıcı boyutu dinamik olacak, neden bu soruda olduğundan emin değilim. bunun yerine o pop-up boyutları dinamik olması gerektiğini düşündüm. benim için durum böyle yani dönüşüm kullanarak im: tercüme (-50%, -50%); IE8 dışında harika çalışıyor.
— gece
324

Dinamik genişlik ve yükseklikte ekrana ortalanmış bir açılır kutu yapmak istiyorum.

Dinamik bir genişliğe sahip bir öğeyi yatay olarak ortalamak için modern bir yaklaşım - tüm modern tarayıcılarda çalışır; destek burada görülebilir .

Güncellenmiş Örnek

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

Hem dikey hem de yatay merkezleme için aşağıdakileri kullanabilirsiniz:

Güncellenmiş Örnek

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

Daha fazla satıcı ön ekli özellik eklemek isteyebilirsiniz (örneklere bakın).

— Josh Crozier
kaynak
1
Bu yaklaşımı, genişliği yatay genişlikten daha büyük olan ve mevcut Firefox, Chrome, IE 11 ve Edge sürümlerinde en iyi şekilde çalışan sabit konumlandırılmış bir görüntüyü yatay olarak ortalamak için kullanıyorum.
— jelhan
1
Testlerimde bu çok iyi çalışıyor (öneklerin arkasında), Win10 Edge 14, Win7 IE9 +, Win10 Chrome, OSX Chrome, iPad4 Chrome ve Safari, Android 4.4+ Chrome. Benim için tek başarısızlık, çevirinin gerçekleşmediği Android 4.0 idi.
— danjah
2
@ahnbizcad, Chrome 61, Safari 11 ve FireFox 65 gibi masaüstü tarayıcılarda çalışır, ancak Android 6'daki Chrome 61'de çalışmaz, kabul edilen yanıt tüm tarayıcılarda çalışır.
— Erik Barke
5
Bu, Chrome'da görüntüleri bulanıklaştırır.
— Tomasz P. Szynalski
1
Her nasılsa sadece img ile tüm tarayıcıda düzgün çalışan yaklaşım. Çok teşekkürler!
— Kugelfisch
136

Ya da sadece normal sabit olmayan bir öğeye benzer şekilde davranmasını sağlayan orijinal CSS'nizi ekleyin left: 0ve ekleyin ve right: 0normal otomatik kenar boşluğu tekniği çalışır:

.jqbox_innerhtml
{
  position: fixed;
  width:500px;
  height:200px;
  background-color:#FFF;
  padding:10px;
  border:5px solid #CCC;
  z-index:200;
  margin: 5% auto;
  left: 0;
  right: 0;
}

DOCTYPEIE'de doğru bir şekilde davranması için geçerli bir (X) HTML kullanmanız gerektiğini unutmayın (ki yine de olması gerekir ..!)

— Prescott olacak
kaynak
2
Ne anlamda? Üst öğe kenarlığı olmayan gövde öğesidir. Vücuda sınır özellikleri eklediyseniz (?!), Hayal edebileceğim% 50 teknik gibi etkileneceğinden emin olun. Verilen parametrelerle gayet iyi çalıştığından eminim, sadece kullanışlı olduğum her tarayıcıda doğrulandı ve öğenin genişliğine bağlı olmamanın ek bir yararı var.
— Prescott
5
Tek yaptığım OP'nin HTML'sine bu 2 özelliği ve bir dokümanı eklemekti. Ancak daha fazla testte IE7 (veya uyumluluk modunda 8) sorun olduğu görülüyor - ayrıca ayarlanmışsa rightmülkün değerine uymuyor gibi görünüyor left! ( msdn.microsoft.com/en-us/library/…left ve rightIE7'de yalnızca "kısmi" desteğe sahip olduğunu not eder ). Tamam, IE7 desteği önemli, ancak gelecek için hatırlamak için büyük bir hile varsa bu çözümün iyi olmadığını kabul ediyorum :)
— Prescott
7
kabul edilen cevap bu olmalıdır. Biri opaklık maskesi için diğeri modal için iki sabit pozisyonum vardı. sabit konum modelini ekranın ortasında ortalamanın tek yolu buydu. Müthiş cevap kim düşünebilirdi?
— Chris Hawkes
3
Kabul ediyorum, bu kabul edilen cevap olmalı. Genişliğe bağlı olmadığı için duyarlı tasarımda da mükemmel çalışır.
— Hector Ordonez
7
Bazı css sadece OP ile ilgili olduğu için, cevabı basitleştirmenizi öneririm. Tek ihtiyacınız olan konum: sabit; sol: 0; sağ: 0; kenar boşluğu: 0 otomatik; .
— Hector Ordonez
23

Şuna benzer bir kap ekleyin:

div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

Sonra kutunuzu bu div içine koymak iş yapacak.

— Romulus Urakagi Ts'ai
kaynak
"text-align: center" iç div'ı merkezlemede benim için çalışmadı.
— nima
2
Bunun için dahili kutunun olması gerekir display: inline-block. (Diğer bazı görüntüleme değerleri de işe yarayabilir table.)
— Brilliand
yukarıda zikredilen css'e daha iyi bir yaklaşım, margin:auto;genişlik eklemek width:50%veya değiştirmek width:400px. içerikler düz metin, blok öğeler veya satır içi öğeler olabilir.
— Joshua Burns
20

Sadece ekle:

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
— şilin
kaynak
1
Bu işe yaramıyor position: fixed, sorunun konusu bu. Yanılıyorsam, lütfen cevabınızı çalıştırılabilir bir kod snippet'i içerecek şekilde düzenleyin.
— Flimm
1
sabit pozisyon ile harika çalışıyor.
— Phuhui
1
Elemana veya position: fixedsetine ayarlanması koşuluyla çalışır . max-widthwidth
— Js Lim
7 
#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

içinde diffenet genişliği, yüksekliği olan veya olmayan herhangi bir eleman olabilir. hepsi merkezlidir.

— praffessorr
kaynak
5

Bu çözüm, açılır pencereniz için bir genişlik ve yükseklik tanımlamanızı gerektirmez.

http://jsfiddle.net/4Ly4B/33/

Ve pop-up'ın boyutunu hesaplamak yerine ve eksi yarısını tepeye çıkarmak için, javascript pop-up'ı yeniden boyutlandırıyor ve tüm ekranı doldurmak için ...

(% 100 yükseklik, ekran kullanılırken çalışmaz: tablo hücresi; (bir şeyi dikey olarak ortalamak gerekir)) ...

Neyse çalışıyor :)

— BjarkeCK
kaynak
4 
left: 0;
right: 0;

IE7 altında çalışmıyordu.

Olarak değiştirildi 

left:auto;
right:auto;

Çalışmaya başladı ancak diğer tarayıcılarda çalışmayı durdurdu! Bu yüzden aşağıda IE7 için bu şekilde kullanılır

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}
— Jatinder
kaynak
Tüm çözümü içerecek şekilde cevabınızı düzenlemeyi düşünür müsünüz?
— Flimm
Bu, sol ve sağ taraflarda otomatik kenar boşluğu olmadan çalışmaz.
— RoM4iK
2

Temelde başka içine sarın divve set positionTo fixed.

.bg {
  position: fixed;
  width: 100%;
}

.jqbox_innerhtml {
  width: 500px;
  height: 200px;
  margin: 5% auto;
  padding: 10px;
  border: 5px solid #ccc;
  background-color: #fff;
}
<div class="bg">
  <div class="jqbox_innerhtml">
    This should be inside a horizontally and vertically centered box.
  </div>
</div>
Snippet'i genişlet

— Abdulla Dlshad
kaynak
2

Kullandığım vw(görüntü alanı genişlik) ve vh(görünüm yükseklik). viewport tüm ekranınızdır. 100vwekranlarınızın toplam genişliği ve 100vhtoplam yüksekliği.

.class_name{
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
    position: fixed;
    left: 25vw;top: 25vh;   
}
— Aseem
kaynak
1

Konumu düzeltmek için şunu kullanın:

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}
— Baş ve kuyruk
kaynak
3
Lütfen çözümünüzün gönderilen soru için neden işe yarayacağına ilişkin bir açıklama yapın.
— Shekhar Chikara
0

Bir olası cevap :

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Center Background Demo</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        div.centred_background_stage_1 {
            position: fixed;
            z-index:(-1 );
            top: 45%;
            left: 50%;
        }

        div.centred_background_stage_2 {
            position: relative;
            left: -50%;

            top: -208px;
            /* % does not work.
               According to the
               http://reeddesign.co.uk/test/points-pixels.html
               6pt is about 8px

               In the case of this demo the background
               text consists of three lines with
               font size 80pt.

               3 lines (with space between the lines)
               times 80pt is about
               ~3*(1.3)*80pt*(8px/6pt)~ 416px

               50% from the 416px = 208px
             */

            text-align: left;
            vertical-align: top;
        }

        #bells_and_wistles_for_the_demo {
            font-family: monospace;
            font-size: 80pt;
            font-weight: bold;
            color: #E0E0E0;
        }

        div.centred_background_foreground {
            z-index: 1;
            position: relative;
        }
    </style>
</head>
<body>
<div class="centred_background_stage_1">
    <div class="centred_background_stage_2">
        <div id="bells_and_wistles_for_the_demo">
            World<br/>
            Wide<br/>
            Web
        </div>
    </div>
</div>
<div class="centred_background_foreground">
    This is a demo for <br/>
    <a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
        http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
    </a>
    <br/><br/>
    <a href="http://www.starwreck.com/" style="border: 0px;">
        <img src="./star_wreck_in_the_perkinnintg.jpg"
             style="opacity:0.1;"/>
    </a>
    <br/>
</div>
</body>
</html>
— Martin Vahi
kaynak
Öğenin genişliğini ve yüksekliğini zaten bilmenizi gerektirmesine rağmen, bu işe yarıyor gibi görünüyor.
— Flimm
0

Doğru ortalanmayan yatay elemanlar için bunu kullanmayı deneyin.

width: calc (genişlik:% 100 - merkezde başka ne olursa olsun genişlik )

Örneğin, yan gezinme çubuğunuz 200 piksel ise:

width: calc(100% - 200px);
— Robert Ross
kaynak
0

Sadece böyle bir şey kullanıyorum:

.c-dialogbox {
    --width:  56rem;
    --height: 32rem;

    position: fixed;

    width:  var(--width);
    height: var(--height);
    left:   calc( ( 100% - var(--width) ) / 2 );
    right:  calc( ( 100% - var(--width) ) / 2 );
    top:    calc( ( 100% - var(--height) ) / 2 );
    bottom: calc( ( 100% - var(--height) ) / 2 );
}

İletişim kutusunu benim için hem yatay hem de dikey olarak ortalar ve medya sorgularıyla farklı ekran çözünürlüklerine uyacak şekilde farklı genişlik ve yükseklik kullanabilirim.

CSS özel özelliklerinin calc()desteklendiği veya desteklenmediği tarayıcılar için hala destek sağlamanız gerekiyorsa bir seçenek değildir (caniuse'u kontrol edin.)

— Fabien Snauwaert
kaynak
0

Bu benim için en iyisini yaptı:

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
— Flafy
kaynak
-13

Kusursuz çözüm, align: center tablosunu aşağıdaki gibi kullanmaktır:

<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>

Tüm dünyadaki insanların, div'ı merkezleme gibi temel bir sorunu çözmek için bu bol miktarda saçma zamana harcadıklarına inanamıyorum. css çözümü tüm tarayıcılar için çalışmaz, jquery çözümü bir yazılım hesaplama çözümüdür ve başka nedenlerle bir seçenek değildir.

Masayı kullanmaktan kaçınmak için tekrar tekrar çok fazla zaman harcadım, ancak deneyim bana savaşmayı bırakmamı söylüyor. Div ortalamak için tablo kullanın. Tüm tarayıcılarda her zaman çalışır! Asla endişelenme.

— Cheong
kaynak
11
Bu soruya hiç cevap vermiyor. CSS olmayan bir eşdeğeri yok position:fixed.
— Brilliand
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.