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

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

width: 500px;

а мой дочерний элемент

/*some width, for this example let say it 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% width.

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

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

Спасибо!

Ответ 1

Если элемент должен быть абсолютно позиционирован (поэтому 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); потянет половину блока за собственную ширину назад по оси x (т.е. слева), которая поместит ее вправо в центре родителя.

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

Ответ 2

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

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

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%).

Ответ 3

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

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

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

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

position:relative;

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

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

.center-center

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

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

https://jsfiddle.net/f1Lfqrfs/

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

flex-wrap: wrap;

Ответ 4

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

CSS:

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

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

Ответ 5

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";
}

Ответ 6

Я получил это с помощью 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.: 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>