xandeadx.ru Блог музицирующего веб-девелопера

CSS → Как отцентрировать абсолютно спозиционированный элемент с известными размерами

Опубликовано в

Пример центрирования элемента .centered как по вертикали, так и по горизонтали:

<style>
.parent {
    position: relative;
}
.centered {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 60px;
    height: 20px;
}
</style>
 
<div class="parent">
    <div class="centered">Отцентрированный элемент</div>
</div>

Демо.

Полезные статьи:
Centering in CSS: A Complete Guide
Выравниваем блок по центру страницы
Центрирование в CSS: полное руководство

Похожие записи

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании