CSS адаптивное горизонтальное центрирование

Question

Я пытался центрировать изображение (логотип) по горизонтали для каждого размера экрана, делая что-то вроде этого

#container {position:relative width:100%; height:100%;}    
#logo {position:absolute; top:0; left:50% width:500px; height:100px;}

и это не работает. Должен ли я использовать ширину контейнера в пикселях?

Answer 1

 #logo {margin-right:auto; margin-left:auto; width:500px; height:100px;}

Answer 2

#logo { height:100px; margin:0 auto; width:500px; }

Это стандартный способ центрирования изображения, предписывающий ему автоматически определять пространство слева и справа от контейнера фиксированного размера.

И пример .

Answer 3

Полагаю, это зависит от того, как вы определяете «отзывчивый», но если вы имеете в виду «отзывчивый» в том смысле, что контент изменяется в соответствии с шириной области просмотра, то все остальные ответы не соответствуют этому критерию, поскольку они полагаются на фиксированная ширина пикселей. Например, что произойдет, если размер порта просмотра меньше 500 пикселей?

Подобная концепция будет работать с процентной шириной и фактически будет отзывчивой, поскольку то, что вы центрируете, тоже будет гибким:

#container { width:100%; height:100%; position:fixed; left:0; right:0; z-index:100;}
#logo { position:fixed; width:80%; z-index:101; left:50%; margin: 10% auto auto -40%;}

Если вы не хотите, чтобы элемент «логотип» достиг большого (на огромных экранах), вы можете добавить max-width:600px;, чтобы ограничить его, но вам нужно будет добавить несколько медиа-запросов, чтобы держать его по центру на больших экранах.