sabit bir konum div hizalama

Sayfamda ortaya position:fixedhizalanmış bir div almaya çalışıyorum .

Bu "hack" i kullanarak bunu her zaman kesinlikle konumlandırılmış div'lerle yapabildim

left: 50%; width: 400px; margin-left:-200px

... burada margin-left değeri, div genişliğinin yarısı kadardır.

Bu, sabit konumlu div'ler için işe yaramıyor gibi görünüyor, bunun yerine onları yalnızca en sol köşeleri% 50'de olacak şekilde yerleştiriyor ve marj-sol bildirimini yok sayıyor.

Sabit konumlandırılmış öğeleri ortalamak için bunu nasıl düzelteceğime dair herhangi bir fikriniz var mı?

Ve kesinlikle konumlandırılmış öğeleri ortalamak için yukarıda bahsettiğim yöntemden daha iyi bir yol söylerseniz bonus bir M&M vereceğim.

Koen'in cevabı tam olarak unsuru merkezlemez.

Doğru yol CCS3 transformmülkü kullanmaktır . O oluyor rağmen bazı eski tarayıcılarda desteklenmez . Ve sabit veya akraba ayarlamamıza bile gerek yok width.

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

Burada jsfiddle karşılaştırması çalışıyor .

Aynı sorunu yaşayanlar için, ancak duyarlı bir tasarıma sahip olanlar için şunları da kullanabilirsiniz:

width: 75%;
position: fixed;
left: 50%;
margin-left: -37.5%;

Bunu yapmak div, duyarlı bir tasarımla bile sabitlemenizi her zaman ekranın merkezinde tutacaktır .

Bunun için flexbox'ı da kullanabilirsiniz.

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  
  /* this is what centers your element in the fixed wrapper*/
  display: flex;
  flex-flow: column nowrap;
  justify-content: center; /* aligns on vertical for column */
  align-items: center; /* aligns on horizontal for column */
  
  /* just for styling to see the limits */
  border: 2px dashed red;
  box-sizing: border-box;
}

.element {
  width: 200px;
  height: 80px;

  /* Just for styling */
  background-color: lightyellow;
  border: 2px dashed purple;
}

<div class="wrapper"> <!-- Fixed element that spans the viewport -->
  <div class="element">Your element</div> <!-- your actual centered element -->
</div>

Yukarıdaki gönderiden en iyi yolun

1. İle sabit bir div var width: 100%
2. Div içinde, yeni bir statik div yapmak margin-left: autove margin-right: autoveya masa marka ne için align="center".
3. Tadaaaah, şimdi sabit div'inizi ortaladınız

Umarım bu yardımcı olur.

Normal div'ler margin-left: autove kullanmalıdır margin-right: auto, ancak bu sabit div'ler için çalışmaz. Bunun etrafındaki yol Andrew'un cevabına benzer , ancak kullanımdan kaldırılan <center>şeyi kullanmaz . Temel olarak, sabit div'e bir sarmalayıcı verin.

#wrapper {
    width: 100%;
    position: fixed;
    background: gray;
}
#fixed_div {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 100px;
    height: 30px;
    text-align: center;
    background: lightgreen;
}

<div id="wrapper">
    <div id="fixed_div"></div>
</div

Bu, div'in tarayıcıyla tepki vermesine izin verirken bir div içindeki sabit bir div'i ortalayacaktır. ör. yeterli alan varsa div ortalanır, ancak yoksa tarayıcının kenarı ile çarpışır; normal merkezli bir div'in nasıl tepki verdiğine benzer.

Sabit bir konumu div hem dikey hem de yatay olarak ortalamak istiyorsanız, bunu kullanın

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

<div class="container-div">
  <div class="center-div">

  </div>
</div>

.container-div {position:fixed; left: 0; bottom: 0; width: 100%; margin: 0;}
.center-div {width: 200px; margin: 0 auto;}

Bu aynı şeyi yapmalı.

Genişliğin 400px olduğunu biliyorsanız, bunu yapmanın en kolay yolu sanırım.

 left: calc(50% - 200px);

Bu, öğenin başka bir gezinme çubuğu gibi sayfaya yayılmasını istiyorsanız çalışır.

genişlik: hesap (genişlik:% 100 - ortalamanın dışında kalan her şey genişlik)

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

genişlik: hesap (% 100 - 200 piksel);

Genişliği kullanmak oldukça kolaydır:% 70; Sol:% 15;

Öğe genişliğini pencerenin% 70'ine ayarlar ve her iki tarafta% 15 bırakır

Twitter Bootstrap (v3) ile aşağıdakileri kullandım

<footer id="colophon" style="position: fixed; bottom: 0px; width: 100%;">
    <div class="container">
        <p>Stuff - rows - cols etc</p>
    </div>
</footer>

Yani sabit konumda olan tam genişlikte bir eleman yapın ve içine bir kabı itin, kap tam genişliğe göre ortalanır. Çok duyarlı davranmalı.

Flex box kullanan bir çözüm; tamamen duyarlı:

parent_div {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
}

child_div {
    /* whatever you want */
}

sarıcı yöntemini kullanmak istemiyorsanız. o zaman bunu yapabilirsiniz:

.fixed_center_div {
  position: fixed;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -100px; /* 50% of width */
  margin-top: -100px; /* 50% of height */
}