Если рассматривать вообщем, то существует несколько вариантов решения проблемы. Здесь также приводится сводная информация, основанная на часто используемом требовании. Ниже приведен список из методов, которые могут центрировать по горизонтали и вертикали. Разнообразное мышление, не будьте слишком твердыми, улучшайте свою способность гибко решать проблемы, проблема очень проста, это достижение эффекта.
1. Способ центрирования коробки по вертикали
Сделайте так, чтобы верхний и нижний края блока пересекались с горизонтальной осевой линией родительского блока, а затем позвольте дочернему блоку отодвинуться на половину своего собственного расстояния.
HTML
Код
<div class="father">
<div class="son"></div>
</div>
CSS
Код
/ * Перемещение по атрибуту преобразования * /
.father {
width: 500px;
height: 500px;
background-color: skyblue;
border: 1px solid #000;
margin: 0 auto;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid #000;
margin-top: 50%;// Переместить вниз на половину родительского поля
transform: translateY(-50%);// Переместить половину поля вверх
}
/ * Переместить позиционированием * /
.father {
width: 500px;
height: 500px;
background-color: skyblue;
border: 1px solid #000;
margin: 0 auto;
position: relative;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid #000;
position: absolute;
top: 50%;// первое перемещение вниз на половину родительского поля
margin-top: -100px;// Переместиться вверх на половину коробки
}
Терерь переходим на второе решение.
2. Используйте свойство vertical-align: middle таблицы, чтобы добиться вертикального центрирования поля.
Код
.father {
width : 500px ;
height : 500px ;
background-color : skyblue ;
border : 1px solid # 000 ;
display : table-cell ; // Формат отображения - таблица
вертикальное-выравнивание : среднее ; / / Содержимое внутри выровнено по центру
}
.son {
width : 200px;
высота : 200px ;
цвет фона : розовый ;
рамка : 1px solid # 000 ;
}
На этом процесс завершен!
3. Зная высоту родительского блока, вы можете использовать поле для расчета верхнего и нижнего полей блока, чтобы центрировать блок
Код
.father {
ширина : 500px ;
высота : 500px ;
цвет фона : Skyblue ;
границы : 1px твердое # 000 ;
Запас : 50px авто ;
}
.son {
ширина : 200px ;
высота : 200px ;
background-color : pink ;
border : 1px solid # 000 ;
margin-top : 149px ; // Укажите margin-top в соответствии с высотой родительского блока
}
На этом завершено!
Метод центрирования коробки по горизонтали
1. Используйте поле: 0 авто;
Код
.father {
width: 500px;
height: 500px;
background-color: skyblue;
border: 1px solid #000;
margin: 50px auto;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid #000;
margin: 0 auto;// Позволяет блоку автоматически адаптироваться влево и вправо, хочет быть слева: auto; вправо: auto
left:auto; right:auto
}
Далее:
2. Осуществить центрирование, рассчитав левый и правый поля
Код
.father {
width: 500px;
height: 500px;
background-color: skyblue;
border: 1px solid #000;
margin: 50px auto;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid #000;
margin-left: 149px;// Для фиксированной ширины родительского поля укажите margin-left
}
Здесь завещаем и переходим далее.
3. Сначала сделайте левый и правый края блока перпендикулярно вертикальной центральной линии родительского блока, а затем переместите дочерний блок обратно на половину его ширины.
Код
/ * Реализация с помощью преобразования * /
.father {
width: 500px;
height: 500px;
background-color: skyblue;
border: 1px solid #000;
margin: 50px auto;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid #000;
margin-left: 50%;// первое перемещение половины родительского блока
transform: translateX(-50%);// затем перемещаемся самостоятельно Половина из коробки
}
/ * достигается за счет позиционирования * /
.father {
width: 500px;
height: 500px;
background-color: skyblue;
border: 1px solid #000;
margin: 50px auto;
position: relative;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid #000;
position: absolute;
left: 50%;// переместить половину родительского блока вправо
margin-left: -100px;// переместить половину поля влево
/* transform: translateX(-50%);// Переместить поле наполовину
}
Смотрим дальше.
4. Превратите блок во встроенный блок, а затем используйте атрибут выравнивания текста, чтобы центрировать блок по горизонтали.
Код
.father {
width: 500px;
height: 500px;
background-color: skyblue;
border: 1px solid #000;
margin: 50px auto;
text-align: center;// Сделать родительский блок горизонтально центрированным
}
.son {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid #000;
display: inline-block;// сделать так, чтобы дочерний блок отображался как режим встроенного блока
}
Это статья показала вам, как использовать CSS для центрирования поля, где существует определенная справочная ценность.
