Каков наилучший способ центрировать div внутри другого div?
В Win-Vector есть очень мощный новый пакет от ученых гениальных данных (люди, которые делали vtreat, seplyr и replyr), называемые cdata. Он реализует принципы «скоординированных данных», описанные в в этом документе , а также в этом сообщении в блоге . Идея заключается в том, что независимо от того, как вы организуете свои данные, должно быть возможно идентифицировать отдельные точки данных с помощью системы «координат данных». Вот отрывок из недавнего сообщения в блоге от John Mount:
Вся система основана на двух примитивах или операторах cdata :: moveValuesToRowsD () и cdata :: moveValuesToColumnsD (). Эти операторы имеют сводную, разворотную, однострочную кодировку, транспонирование, перемещение нескольких строк и столбцов и многие другие преобразования как простые частные случаи.
Легко написать много разных операций в терминах примитивов cdata. Эти операторы могут работать как в памяти, так и в больших масштабах данных (с базами данных и Apache Spark, для больших данных используются варианты cdata :: moveValuesToRowsN () и cdata :: moveValuesToColumnsN ()). Трансформации управляются таблицей управления, которая сама является диаграммой (или изображением) преобразования.
blockquote>Сначала мы создадим контрольную таблицу (см. сообщение в блоге для получения подробной информации), а затем выполнить перемещение данных из строк в столбцы.
library(cdata) # first build the control table pivotControlTable <- buildPivotControlTableD(table = dat1, # reference to dataset columnToTakeKeysFrom = 'numbers', # this will become column headers columnToTakeValuesFrom = 'value', # this contains data sep="_") # optional for making column names # perform the move of data to columns dat_wide <- moveValuesToColumnsD(tallTable = dat1, # reference to dataset keyColumns = c('name'), # this(these) column(s) should stay untouched controlTable = pivotControlTable# control table above ) dat_wide #> name numbers_1 numbers_2 numbers_3 numbers_4 #> 1 firstName 0.3407997 -0.7033403 -0.3795377 -0.7460474 #> 2 secondName -0.8981073 -0.3347941 -0.5013782 -0.1745357
2 ответа
С помощью FlexBox
С помощью display: flex; вы можете указать свойства justify-content и align-items - center, чтобы центрировать дочерние элементы как по горизонтали, так и по вертикали.
Когда элемент display: flex представляет собой строку (flex-direction: row;), justify-content будет обрабатывать горизонтальное позиционирование, тогда как align-items обрабатывает вертикальное позиционирование. Когда flex-direction установлено в column, значения justify-content и align-items меняются местами.
Пример:
.parent-element {
display: flex;
/* flex-direction defaults to row */
justify-content: center;
align-items: center;
}
С помощью CSS Grid
Вы можете использовать свойство place-items для центрирования дочерних элементов сетки. Однако вы должны знать, что place-items в настоящее время поддерживается не всеми браузерами.
Пример:
.parent-element {
display: grid;
place-items: center;
}
Автоматическое заполнение поля
Иногда вы можете использовать значение auto для свойства margin, чтобы подтолкнуть элемент к центру.
Обязательно ознакомьтесь с этой записью, в которой объясняется , что необходимо для работы margin: auto; .
Пример:
.child-element {
/* top right bottom left -- all set to auto */
margin: auto;
}
Абсолютное позиционирование с преобразованием
Вы можете расположить элемент в центре экрана, установив для свойства position значение absolute (это будет вытащите его из обычного документооборота). Затем вы можете использовать свойства left и top для перемещения элемента вниз и вправо 50%.
После того, как он выдвинут 50%, нам нужно переместить его обратно на половину ширины / высоты элемента, мы можем сделать это с помощью translate внутри свойства transform.
Пример:
.child-element {
position: absolute;
top: 50%;
left: 50%;
/* translate(<x value>, <y value>) */
transform: translate(-50%, -50%);
}
Отказ от ответственности:
Это не рекомендуется для элементов, которые являются частью вашего обычного потока документов, поскольку они, скорее всего, будут перекрывать другие элементы. Это отлично подходит для модальных тем не менее.
Попробуйте установить CSS margin: 0 auto во внутреннем div, который вы хотите центрировать.