Всем привет, мы снова встретились, я ваш друг Цюаньчжаньцзюнь.
В последнее время при написании веб-страниц мне часто приходится центрировать элемент управления на экране, поэтому я записал несколько распространенных методов, которые относительно просты.
Добавьте прямо в горизонтальный центр<center>
Просто отметьте,Или установитеmargin:auto;
Конечно, вы также можете использовать следующий метод
Вот два способа центрировать экран (по горизонтали + по вертикали). Поместите пример HTML-кода:
<body>
<div class="main">
<h1>MAIN</h1>
</div>
</body>
div использует абсолютный макет,настраиватьmargin:auto;
并настраиватьtop、left、right、bottomценитьПросто будьте равны,Они не обязательно должны быть 0.
.main{
text-align: center; /*Центрируем текст внутри div*/
background-color: #fff;
border-radius: 20px;
width: 300px;
height: 350px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Эффект такой, как показано на рисунке:
.main{
text-align: center;
background-color: #fff;
border-radius: 20px;
width: 300px;
height: 350px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
<center>
Этикетка,Но это устарело,Использование следующее:<p><center>123</center></p>
этот<center>
Этикетка就是相对于<p>
Этикетка里的文字,Вы можете отцентрировать его.
Поскольку центральный тег устарел, не рекомендуется использовать его более формально. Вместо него можно использовать следующий метод:
<p style="text-align:center;">123</p>
Издатель: Лидер стека программистов полного стека, укажите источник для перепечатки: https://javaforall.cn/126427.html Исходная ссылка: https://javaforall.cn