Разница между методами центрирования CSS. Что лучше?

В настоящее время я задаюсь вопросом, в чем разница между следующими методами центрирования «обертки» в CSS.Разница между методами центрирования CSS. Что лучше?

Метод 1:

#wrapper { 
    width: 960px; 
    margin-left: auto; 
    margin-right: auto; 
}

Метод 2:

#wrapper { 
    width: 960px; 
    position: relative; 
    margin: 0 auto -4em; 

    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
}

Из того, что я могу видеть через некоторые из моих предыдущих проектов, они производят тот же эффект. «Метод 2» - это то, что я нашел на видео с YouTube, а «Метод 1» - это то, что я узнал ранее.

Я просто хочу знать, что лучше, если это возможно. Хотя я бы тоже не возражал против новых методов! Что-нибудь, что может помочь, я возьму. Спасибо за чтение!

источник

2016-06-16 Trevon rawls

Возможно, вы хотите определить * лучше *? Похоже, он ищет мнения. – nicael

центрирование выполняется установкой левого и правого полей в положение auto. Оба метода используют один и тот же метод (с использованием другого синтаксиса). Так вы спрашиваете, какой синтаксис лучше? – Pevara

На мой первоначальный вопрос был дан ответ, но по какой-то причине тотчас же удалил свой ответ. Я буду признавать, что мой второй вопрос ищет мнения. Это неправильно? –

Метод 1 будет предпочтительным способом, хотя, чтобы сделать его отзывчивым вы должны сделать

width:100%; 
max-width:960px;

источник

2016-06-16 20:51:55 Mrooksads

margin: 0 auto;

является сокращением для

margin-top: 0; 
margin-bottom: 0; 
margin-right: auto; 
margin-left: auto;

Ваших второго примера равно

margin-top: 0; 
margin-bottom: -4em; 
margin-right: auto; 
margin-left: auto;

, так что не такой же, как ваш первый пример (если не было бы inheritated margin-bottom из -4em

Но оба центрирования элемента блока. Тем не менее, bottom-margin: -4em вызовет последующие элементы для перекрытия этого элемента с помощью 4em ...

Примечание: Все это относится только к горизонтальному центрированию. Существует нет вертикальное центрирование в обоих методах.

источник

2016-06-16 21:37:07 Johannes

Разница между методами центрирования CSS. Что лучше?

ответ

Смежные вопросы