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

Question

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

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 позиционирует элемент b y его правая сторона, так что все содержимое будет слева от точки его родительской ширины 50%.

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

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

Спасибо!

Answer 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 (то есть слева), которая поместит ее прямо в центр родителя.

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

Answer 2

левый: 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"; 
} 

Answer 3

Если добавить еще один элемент является вариант, необходимо учитывать следующее:

(View the following code live here)

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

Answer 4

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

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

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

И «по крайней мере» установить следующие свойства ребенка DIV

position:relative; 

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

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

.center-center 

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

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

https://jsfiddle.net/f1Lfqrfs/

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

flex-wrap: wrap;