Понимание того, как центрирование div работает с начальной загрузкой 4

Question

Я наткнулся на некоторый код, который приятно центрирует окно входа в систему, которое я использовал. Но потом я понял, что на самом деле хочу, чтобы мой логин был слева, а не 50%. Однако я понятия не имею, как на самом деле работает код. Когда я гугляю центрирующие элементы, он предлагает поставить left: x% и margin -x / 2% вместе с absolute. Этот код ничего не делает, но работает.

Хотя я не уверен, как это работает, мне интересно, может кто-нибудь объяснить, чтобы я мог возиться с этим, чтобы изменить положение.

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.Absolute-Center.is-Responsive {
  width: 50%; 
  height: 50%;
  min-width: 200px;
  max-width: 400px;
  padding: 40px;
}

<div class="container">
    <div class="row">
        <div class="Absolute-Center is-Responsive" style="text-align: center>
            hello
        </div>
    </div>
</div>

Скрипка находится здесь

Кажется, что без начальной загрузки CSS он не совсем правильно центрируется.

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

Может ли кто-нибудь объяснить, как это работает, чтобы я мог понять это сам? Или, если это действительно странный способ сделать это, возможно, дать разъяснения. Спасибо.

Answer 1

Основное, основное отличие между Bootstap3 и Bootstrap4 заключается в том, что базовая Grid-система меняет использование Floats для выравнивания на Flexbox.

Следовательно, понимание flexbox важно и полезно даже вне Bootstrap.И, к счастью, это также довольно просто.

Для Flexbox требуются две вещи:

1. Родительский контейнер (например, DIV, section, aside, p и т. Д.)

2. Один или несколько дочерних элементов (например, div, p, img и т. Д.)

Вы поворачиваетесьflexbox на на родительском элементе: display:flex;

Затем существуют различные переключатели (всего их несколько).Некоторые из них установлены на родительском (как в случае justify-content), но другие могут быть установлены на элементы (как с flex-grow:1)

Поскольку вы хотите понять какУправляйте этим правильно, я предлагаю вам потратить 20 минут, необходимых для просмотра следующего, отличного, быстро развивающегося учебника по флексбоксу:

Учебник YouTube - быстро развивающегося и лучшего в своем классе

Вот отличная таблица для Flexbox.

Посмотрите учебник, и через 30 минут ваша проблема будет решена - и выузнаю flexbox.

_{PS У меня нет связи с видео или его ведущим - мне повезло обнаружить его, и теперь я передаю его.}

Answer 2

Div центрируется на том, что вы упомянули - немного хитро , позвольте мне объяснить.
Прежде всего, ваш div абсолют и растянут со всех сторон.Что приводит к этому.

.Absolute-Center {
  margin: auto;
  position: absolute;
  background:red;
  top: 0; left: 0; bottom: 0; right: 0;
}

<div class="container">
    <div class="row">
        <div class="Absolute-Center is-Responsive" style="text-align: center">
        </div>
    </div>
</div>

Обратите внимание, это охватывает всю страницу .Поскольку позиция равна 0 со всех 4 сторон
Теперь просто добавьте ограничение max-width и max-height.Это означает, что это то же самое, что и приведенный выше фрагмент, но вы просто изменили ширину

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.Absolute-Center.is-Responsive {
  min-width: 200px;
  max-width: 200px;
}

<div class="container">
    <div class="row">
        <div class="Absolute-Center is-Responsive" style="text-align: center">
            hello
        </div>
    </div>
</div>

Теперь, что случилось?Ширина является ограничением.Далее вам нужно было указать высоту.Обратите внимание, что верхняя, нижняя и другие области приводят к тому, что этот короткий элемент находится в центре, а стрела - в центре

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.Absolute-Center.is-Responsive {
  width: 50%; 
  height: 50%;
  min-width: 200px;
  max-width: 400px;
  padding: 40px;
}

<div class="container">
    <div class="row">
        <div class="Absolute-Center is-Responsive" style="text-align: center">
            hello
        </div>
    </div>
</div>

Элемент div в основном растянут.

Каков наилучший способ центрирования с использованием абсолютного позиционирования?

Использование этого

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 40%; left: 0; bottom: 0; right: 0;
  margin-left:auto; margin-right: auto;
}

<div class="container">
    <div class="row">
        <div class="Absolute-Center is-Responsive" style="text-align: center">
            hello
        </div>
    </div>
</div>

Что лучше в этом?Вы можете отредактировать верхнее, левое и правое значения в соответствии со своими предпочтениями, чтобы получить отзывчивые представления.То, что я сделал, это просто установил значение top в процентах.Это останется неизменным для многих представлений о масштабированииВы можете откалибровать виды и добиться наилучшего для вас.

Что такое вертикальная единица высоты?

Эта единица vh добавляется к дисплеям в масштабе согласновысота, а не ширина экрана.Попробуйте этот пример и обратите внимание, как изменяется текст, когда вы редактируете высоту браузера.Используя vw для ширины.

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 40vh; left: 0; bottom: 0; right: 0;
  margin-left:auto; margin-right: auto;
}

<div class="container">
    <div class="row">
        <div class="Absolute-Center is-Responsive" style="text-align: center">
            hello
        </div>
    </div>
</div>

Бонусный метод центрирования: Flexbox

Flexbox - лучший метод , когда речь идет об центрировании элементов в CSS.Просто убедитесь, что ваш родительский div и дочерний div находятся на нужной высоте и используйте align-items: center

.Absolute-Center {
  display: flex;
  align-items: center;
  height: 100%;
}

html,
body {
  height: 100%;
}

<div class="Absolute-Center is-Responsive">hello</div>

Чтобы центрировать по горизонтали, просто добавьте justify-content: center

.Absolute-Center {
  display: flex;
  align-items: center;
  justify-content:center;
  height: 100%;
}

html,
body {
  height: 100%;
}

<div class="Absolute-Center is-Responsive">hello</div>

Answer 3

В Bootstrap 4 вам нужно добавить два простых класса в ряд.и вам нужно использовать положение

.Absolute-Center {
   margin: auto;
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
}

.Absolute-Center.is-Responsive {
  width: 50%; 
  height: 50%;
  min-width: 200px;
  max-width: 400px;
  padding: 40px;
  background: red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row justify-content-center align-items-center" style="height: 100vh;">
        <div class="Absolute-Center is-Responsive" style="text-align: center">
            hello
        </div>
    </div>
</div>

Answer 4

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 50%; left: 50%;
  transform :translate(-50%,-50%);
}

.Absolute-Center.is-Responsive {
  width: 50%; 
  height: 50%;
  min-width: 200px;
  background-color: black;
  max-width: 400px;
  padding: 40px;
}

    <div class="container">
        <div class="row">
            <div class="Absolute-Center is-Responsive" style="text-align: center; color:white">
                hello
            </div>
        </div>
    </div>

объяснение здесь Преобразование: перевод (-50%, -50%)

Answer 5

В начальной загрузке очень просто:

<div class="container">
 <div id="box" class="offset-3"> box content </div>
</div>

Система сетки начальной загрузки состоит из строк и столбцов, и это мобильная первая структура.

• смещение: оставлено пространствоэлемент, в данном случае 3 относится к количеству столбцов, так как сетка состоит из 12 столбцов, 3 равен 25%.

Вы также можете взглянуть на система сетки начальной загрузки .

Answer 6

Div центрируется правильно, но содержимое внутри него не центрируется в нем. Итак, вам нужно использовать display: flex, чтобы назначить содержимое абсолютного деления.

Я обновил скрипку здесь https://jsfiddle.net/aedo3pv5