wyśrodkowanie wyrównanie stałej pozycji div

Próbuję uzyskać element div position:fixedwyrównany do środka na mojej stronie.

Zawsze mogłem to robić z absolutnie pozycjonowanymi elementami DIV, używając tego „hackowania”

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

... gdzie wartość margin-left to połowa szerokości div.

Wydaje się, że nie działa to w przypadku elementów DIV ze stałą pozycją, zamiast tego umieszcza je w skrajnym lewym rogu na 50% i ignoruje deklarację marginesu z lewej strony.

Jakieś pomysły, jak to naprawić, aby móc wyśrodkować i wyrównać ustalone elementy?

Dodam też dodatkowe M&M, jeśli możesz mi powiedzieć lepszy sposób na wyśrodkowanie i wyrównywanie bezwzględnie pozycjonowanych elementów niż ten, który opisałem powyżej.

Odpowiedź Koena nie skupia dokładnie elementu.

Właściwym sposobem jest użycie CCS3 transformwłasności. Chociaż nie jest obsługiwany w niektórych starych przeglądarkach . I nie musimy nawet ustalać stałego ani krewnego width.

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

Porównanie pracy jsfiddle tutaj .

Dla tych, którzy mają ten sam problem, ale z responsywnym projektem, możesz również użyć:

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

W ten sposób zawsze utrzymasz swój stały divśrodek na ekranie, nawet przy responsywnym projekcie.

Możesz również użyć do tego flexboxa.

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

Z powyższego postu myślę, że najlepszy sposób

1. Miej stały element DIV z width: 100%
2. Wewnątrz elementu DIV utwórz nowy statyczny element DIV za pomocą margin-left: autoi margin-right: auto, lub dla tabeli utwórz go align="center".
3. Tadaaaah, wyśrodkowałeś teraz swój stały div

Mam nadzieję, że to pomoże.

Normalne elementy div powinny używać margin-left: autoi margin-right: auto, ale to nie działa w przypadku stałych elementów div. Sposób obejścia tego jest podobny do odpowiedzi Andrew , ale nie używa przestarzałej <center>rzeczy. Zasadniczo po prostu nadaj stałemu elementowi opakowanie opakowanie.

#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

Spowoduje to wyśrodkowanie ustalonego elementu div w elemencie div, jednocześnie umożliwiając mu reagowanie w przeglądarce. tj. element div zostanie wyśrodkowany, jeśli jest wystarczająco dużo miejsca, ale zderzy się z krawędzią przeglądarki, jeśli go nie ma; podobnie jak reaguje zwykły wyśrodkowany element DIV.

Jeśli chcesz wyśrodkować, wyrównując ustaloną pozycję div w pionie i poziomie, użyj tego

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;}

To powinno zrobić to samo.

Jeśli wiesz, że szerokość wynosi 400 pikseli, byłby to najłatwiejszy sposób, aby to zrobić.

 left: calc(50% - 200px);

Działa to, jeśli chcesz, aby element obejmował całą stronę jak inny pasek nawigacyjny.

width: calc (width: 100% - width, cokolwiek innego nie jest wyśrodkowane)

Na przykład, jeśli Twój boczny pasek nawigacyjny ma 200 pikseli:

szerokość: calc (100% - 200px);

Szerokość: 70% jest dość łatwa; po lewej: 15%;

Ustawia szerokość elementu na 70% okna i 15% skrzydeł po obu stronach

Użyłem następujących z Twitter Bootstrap (v3)

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

To znaczy zrobić element o pełnej szerokości, który ma stałą pozycję i po prostu wepchnąć do niego pojemnik, kontener jest wyśrodkowany względem pełnej szerokości. Powinien też zachowywać się dobrze responsywnie.

Rozwiązanie wykorzystujące flex box; w pełni responsywny:

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

child_div {
    /* whatever you want */
}

jeśli nie chcesz używać metody opakowania. możesz to zrobić:

.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 */
}