it-roy-ru.com

Положение по центральной точке, а не по верхней левой точке

Можно ли сказать, чтобы код позиционировался по центральной точке элемента, а не по верхней левой точке? Если мой родитель элемент имеет

width: 500px;

и мой ребенок элемент имеет

/*some width, for this example let's say it's 200px*/
position: absolute;
left: 50%;

можно предположить, что в зависимости от расположения 50% дочерний элемент будет находиться в середине родительского элемента, оставляя 150px свободного пространства с каждой стороны. Однако это не так, поскольку это верхняя левая точка дочернего элемента, которая идет в 50% ширины родительского элемента, поэтому вся ширина дочернего элемента 200px направляется оттуда, оставляя 250px свободного места слева и только 50px справа.

Итак, мой вопрос, как добиться позиционирования центра ?

Я нашел это решение:

position: absolute;
width: 200px;
left: 50%;
margin-left: -100px;

но мне это не нравится, потому что вам нужно редактировать его вручную для ширины каждого элемента - я хотел бы что-то, что работает глобально.

(Например, когда я работаю в Adobe After Effects, я могу установить позицию для объекта, а затем установить конкретную опорную точку этого объекта, которая будет помещена в эту позицию. Если холст имеет ширину 1280px, вы помещаете объект в 640px и вы выбираете центр объекта, чтобы быть ваша точка привязки, то весь объект будет сосредоточен в пределах 1280px широкого холста.)

Я хотел бы представить что-то вроде этого в CSS:

position: absolute;
left: 50%;
horizontal-anchor: center;

Аналогично, horizontal-anchor: right будет располагать элемент с правой стороны, поэтому весь контент будет слева от точки ширины 50% его родителя.

И то же самое относится к vertical-anchor, вы получите это.

Итак, возможно ли что-то подобное с использованием только CSS (без сценариев)?

Спасибо!

36
kaboom1

Если элемент должен быть абсолютно позиционирован (то есть margin: 0 auto; бесполезен для центрирования), и о сценариях не может быть и речи, этого можно добиться с помощью CSS3-преобразований.

.centered-block {
    width: 100px; 
    left: 50%; 
    -webkit-transform: translate(-50%, 0); 
    position: absolute;
}

Смотрите это fiddle для некоторых примеров. Важные части: left: 50%; толкает блок на полпути к его родителю (так, как вы упомянули, левая сторона находится на отметке 50%). transform: translate(-50%, 0); вытягивает блок на половину его ширины own назад вдоль оси x (то есть влево), что помещает его прямо в центр родительского элемента.

Обратите внимание, что это вряд ли будет кросс-браузерной совместимостью и все же потребует некоторого отступления для старых браузеров.

46
John

Наткнулся на этот вопрос, и я хотел бы добавить еще один способ для центрирования контента в div.

Используя режим отображения CSS3 «гибкая коробка», как при установке следующих свойств CSS для родительского div

display: flex;
position: relative;
align-items: center;
justify-content:center;

И, по крайней мере, установка следующих свойств для дочернего элемента div

position:relative;

Браузер автоматически центрирует содержимое внутри родительского div, независимо от его ширины или высоты, это особенно удобно, когда вы разрабатываете что-то вроде сетки изображений или просто хотите избавиться от хлопот вычисления позиции div, а затем приходится пересчитать его, когда вы передумаете о настройке указанного div.

В своей работе я стараюсь создать класс с именем

.center-center

Со свойствами, которые я описал для родительского div, просто добавьте его к любому элементу, содержимое которого мне нужно центрировать.

Я создал JSFiddle, чтобы поддержать это объяснение, не стесняйтесь нажимать на красные квадраты, чтобы увидеть позиционирование в действии.

https://jsfiddle.net/f1Lfqrfs/

Для поддержки нескольких строк вы можете добавить (или раскомментировать в JSF) следующее свойство CSS в родительский DIV

flex-wrap: wrap;
2
Kay Angevare

Если добавление другого элемента является опцией, учтите следующее:

( Просмотреть следующий код в прямом эфире здесь )

HTML:

<div class="anchor" id="el1">
    <div class="object">
    </div>
</div>
<div class="anchor" id="el2">
    <div class="object">
    </div>
</div>

CSS:

/* CSS for all objects */

div.object
{
    width:               100%;
    height:              100%;
    position:            absolute;
    left:                -50%;
    top:                 -50%; /* to anchor at the top center point (as opposed to true center) set this to 0 or remove it all together */
}

div.anchor
{
    position:            absolute; /* (or relative, never static) */
}


/* CSS for specific objects */

div#el1
{
    /* any positioning and dimensioning properties for element 1 should go here */
    left:                100px;
    top:                 300px;
    width:               200px;
    height:              200px;
}

div#el2
{
    /* any positioning and dimensioning properties for element 2 should go here */
    left:                400px;
    top:                 500px;
    width:               100px;
    height:              100px;
}

div#el1 > div.object
{
    /* all other properties for element 1 should go here */
    background-color:    purple;
}

div#el2 > div.object
{
    /* all other properties for element 2 should go here */
    background-color:    orange;
}

По сути, мы создаем один объект для определения положения, ширины и высоты элемента, а затем помещаем в него другой объект, который смещается на 50% и получает родительские размеры (т. Е. width: 100%).

2
Sandy Gifford

Вот один из способов центрировать текстовый элемент в середине контейнера (используя в качестве примера заголовок

CSS:

.header {
     text-align: center;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     position: absolute;
}

Это центры по средней точке крепления.

1
Melinda Chang

Я получил это с помощью transform: translateX с calc для горизонтального позиционирования по центру элемента вместо верхнего левого. Тот же трюк можно использовать для вертикали, используя transform: transformY. Это будет работать с шириной любого типа (попробуйте изменить размер)

Фрагмент: transform: translateX(calc(-50% + 223px));

Поддержка браузера: https://caniuse.com/#feat=transforms2d , https://caniuse.com/#feat=calc

Codepen для других примеров: https://codepen.io/manikantag/pen/KJpxmN

Обратите внимание на offsetLeft/offsetTop и т.д.: el.offsetLeft не даст правильное значение для CSS-преобразованных элементов. Вам потребуется что-то вроде el.getBoundingClientRect().left - el.offsetLeft - el.parentNode.offsetLeft( как упоминалось здесь )

Примечание об эффекте потока: как подробно описано в CSS-вещи, которые не занимают место , преобразование не влияет на следующий элемент без учета смещения, вызванного преобразованием. Иногда это не может быть предполагаемым поведением. Это можно исправить, используя отрицательные поля, если ширина/высота зафиксированы (не работает, если ширина/высота используют %)

.left-positioned {
  margin-left: 223px;
  background-color: lightcoral;
}

.center-positioned {
  transform: translateX(calc(-50% + 223px)); /*=====> actual solution */
  background-color: cyan;
}

.with-width {
  width: 343px;
  background-color: lightgreen;
}


/* styles not related to actual solution */

div {
  resize: both;
  overflow: auto;
}

.container {
  background-color: lightgray;
}

.ele {
  display: inline-block;
  height: 70px;
  text-align: center;
}
<div class="container">
  <div class="ele left-positioned">Reference element (left at 223px)</div> <br/>
  <div class="ele center-positioned">^<br/>Center positioned element (center at 223px)</div> <br/>
  <div class="ele center-positioned with-width">^<br/>Center positioned element with width (center at 223px)</div>
</div>

0
manikanta

left: 50% не центрирует центр тяжести этого div на 50% влево, это расстояние между левой границей и левой границей родительского элемента, поэтому в основном вам нужно выполнить некоторые вычисления.

left = Width(parent div) - [ Width(child div) + Width(left border) + Width(right border) ]

left = left / 2

Таким образом, вы можете сделать функцию Javascript ...

function Position(var parentWidth, var childWith, var borderWidth)
{
      //Example parentWidth = 400, childWidth = 200, borderWidth = 1
      var left = (parentWidth - ( childWidth + borderWidth));
      left = left/2;
      document.getElementById("myDiv").style.left= left+"px";
}
0
Ali Bassam