Горизонтальный центр div с фиксированной позицией

0

В следующем коде, как мне горизонтально центрировать div с фиксированной позицией? Я пробовал несколько вещей, но никто не получит это прямо в центре.

Я пытаюсь получить div на 100 пикселей сверху и горизонтально по центру.

<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
<style type="text/css">
.myDiv {
    position: fixed;
    top:100px;
    left:auto;
    padding:10px;
    background-color: blue;
    color: white;
}
</style>
</head>

<body>
    <div class="myDiv">Something went wrong. God save the Queen!</div>
</body>
</html>
  • 0
    Вы пробовали слева: 50%; или что-нибудь?
  • 0
    Я сделал, но это все еще не в центре (я использую Firefox прямо сейчас).
Показать ещё 1 комментарий
Теги:

7 ответов

2
Лучший ответ

Будь проще:

left  : 25%;
right : 25%;

Running example

Поделиться
  • 1
    На самом деле это то же самое, что фиксировать ширину до 50% . Возможно, он захочет определить это альтернативно.
  • 2
    Не в вопросе, но вы можете быть правы. Тогда раствор @FabrizioCalderan больше не перебивает, и его следует использовать. Центр экрана минус половина пункта.
4

если вы заранее не знаете ширину своего div (или если вы не можете установить его), вы можете использовать свойство transform:

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

Пример кода: http://codepen.io/anon/pen/fqpwd

Поделиться
  • 0
    Это довольно здорово! Но CSS3 нужен.
  • 0
    Работает на всех современных браузерах. А для более старых браузеров (IE <9) вы могли бы использовать другой стиль / постепенное ухудшение (например, width: 50% ) через условные комментарии
Показать ещё 1 комментарий
0

Если у вас есть определенная ширина, попробуйте добавить это:

width: somevalue;
left: 50%;
margin-left: -somevalue/2;

Пример: http://jsfiddle.net/NZX38/

Поделиться
0

Ну вот.

РАБОЧАЯ ДЕМО

Код HTML:

<div class="myDiv">Something went wrong. God save the Queen!</div>

Код CSS:

.myDiv {
   background-color: #0000FF;
    color: #FFFFFF;
    left: auto;
    margin: 0 auto;
    padding: 10px;
    position: fixed;
    text-align: center;
    top: 100px;
    width: calc(100% - 37px);
}

Надеюсь это поможет.

Поделиться
0

jsFiddle ЗДЕСЬ

Вы должны установить ширину, чтобы вы могли использовать ее в HTML.

<div id="centerme">I'm a div and I wanna stay in the center!</div>

и это для CSS.

#centerme{
        position: fixed;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;   
        background:red;
        width:250px;
        height:60px;
    }

PS: как вы можете видеть, если вы установите высоту, вы можете также центрировать ее вертикально;) (но вам это не нужно :))

Поделиться
0

Если вы исправите его ширину, с любым значением (может быть процент), вы можете сделать это следующим образом:

width: 250px;
position: fixed;
left: 50%;
margin-left: -125px; /* 250 / 2 */

Если вы переходите с процентами, это еще проще:

width: 50%;
position: fixed;
left: 25%; /* (100 - width) / 2 */

Рабочая скрипка: JSFiddle

Поделиться
  • 0
    @ Данко Нет, как вы можете видеть в моей скрипке. Не с position: fixed . В некоторых случаях вы хотите, чтобы это позиционирование было по-прежнему центрировано.
0

Используйте динамический код jquery для центра div

HTML:

    <p><button id="button1">click and center the div</button></p>
    <p class="centerDiv"></p>

Jquery:

    $("#button1").click(function(){
        function movediv(){
          win_width=$(window).width();
          win_height=$(window).height();
          div_width=$('.centerDiv').width();
          div_height=$('.centerDiv').height();
          $('.centerDiv').css('top',(win_height/2)-(div_height/2)).css('left',(win_width/2)-(div_width/2)).toggle();
        }
        movediv();
        $(window).resize(function(){
    movediv();
    });
});

CSS:

   .centerDiv{
       background-color:red;
       position:absolute;
       width:200px;
       height:100px;
    }

См. Скрипку

Поделиться
  • 0
    Следует избегать использования JavaScript, если в этом нет необходимости и если существуют более простые решения CSS.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню