Расположите div горизонтально по центру

Я хочу расположить div в центре экрана. Проблема в том, что когда div маленький, слева 45% выглядит нормально, но когда div длиннее (то есть больше ширины), мне нужно сделать его слева 30%

Есть ли разумный способ разместить div в центре в зависимости от размера div.

body {
background:blue;
}

.box  {
position: absolute;
top:10px;
left:30%;
background:white;
padding:10px;
border-radius:10px;
}

<div class = "box">
This is long div so need left = 30 percent
</div>

css css-animations

22.10.2022 19:27

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы можете центрировать его по горизонтали таким образом:

.box  {
   position: absolute;
   top:10px;
   left:50%;
   background:white;
   padding:10px;
   border-radius:10px;
   transform: translateX(-50%);
}

22.10.2022 19:32

Ответ принят как подходящий

Вы можете выровнять компонент по центру, используя атрибут display: flex;.

css флекс

body {
flex: 1;
background:blue;
display: flex;
justify-content: center;
}

.box  {
position: absolute;
top:10px;
background:white;
padding:10px;
border-radius:10px;
}

<div class = "box">
This is long div so need left = 30 percent
</div>

+1 Очень творческий способ сделать это. Обычно я просто позиционирую себя как left: 50% и margin-left: -[[width / 2]], но я буду иметь это в виду.

— 22.10.2022 19:34

Я использую div как виджет... Так что проблема в том, что я не могу дать body {flex}, так как это повлияет на хостинг. Есть ли другое исправление?

— 22.10.2022 21:29

Вы можете обернуть элемент виджета гибким элементом.

— 23.10.2022 10:26

22.10.2022 19:32

чтобы центрировать div по горизонтали, простое решение - установить для его поля значение «авто»:

body {
background:blue;
}

.box  {
width: fit-content;
margin: auto;
background:white;
padding:10px;
border-radius:10px;
}

22.10.2022 19:38

Другие вопросы по теме

Анимация CSS, чтобы div выглядел плавно снизу

Анимация CSS для перемещения div вверх по словам

Полигональная анимация CSS не работает при наведении курсора на путь клипа

Как запустить/приостановить анимацию, удерживая любую клавишу и отпуская ее?

Как я могу анимировать изображение с помощью CSS, чтобы оно перемещалось линейно и одновременно сжималось?

Как сделать так, чтобы состояние воспроизведения анимации было приостановлено для работы в React при наведении

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

Можно ли получить больше контроля над этой анимацией CSS?

Анимация-воспроизведение-состояние прямоугольного штриха SVG не изменится по сравнению с Javascript

Настройка трапецеидального искажения анимации эффекта ввода

Расположите div горизонтально по центру

Ответы 3

Другие вопросы по теме

Похожие вопросы