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

Question

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

HTML

<div id="container"></div> 
<div class="parent"> 
    <div class="child"> 
     <h1> Richy Photography </h1> 
    </div> 
</div> 

CSS

#container { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background-image:url(image.jpg); 
    background-size:cover; 
    background-position:50% 50%; 
    background-repeat: no-repeat; 
} 
body, html 
{ 
    height:100%; 
    width:100%; 
} 
.parent { 
    position:relative; 
    font-family: Helvetica, Arial, sans-serif; 
    width: 100%; 
    height: 100%; 
    margin:0; 
    padding:0; 
} 

.child { 
    position: absolute; 
    left:37%; 
    top:37%; 
    margin:0; 
    padding:0; 
} 

Answer 1

Благодаря 37% верхней и левой смещения, текст будет отображаться за пределами экрана, если окно просмотра слишком мал.

Простейшее решение было бы просто установить свой .parent элемент для отображения в качестве table, а затем установить свой .child элемент для отображения в качестве table-cell с горизонтально и вертикально выровненной содержания:

.parent { 
    display: table; 
    height: 100%; 
    width: 100%; 
} 

.child { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

JSFiddle demo.

Это поддерживается на all modern browsers с IE8 и далее.

Для того, чтобы затем получить содержимое для отображения поверх фонового изображения, вам нужно, чтобы дать вашему .parent элемент более высокого z-index свойства и дать ему относительное позиционирование:

.parent { 
    display: table; 
    height: 100%; 
    position: relative; 
    width: 100%; 
    z-index: 2; 
} 

JSFiddle demo.

Хотя вы могли бы просто дать своему элементу .parent фон и полностью опустить элемент #container.

Answer 2

Вам просто нужно изменить ширину, как Ваты когда вы хотите, и теперь вы можете удалить оставили также:

.child { 
position: absolute; 
text-align:center; 
margin:0; 
padding:0; 
width:100%; 
} 

, потому что абсолютный позиционируемый элемент не покрывает всю ширину относительных элементов , так что вы должны указать от себя, и вы можете использовать НЭ выравнивания текста: центр

live demo

Answer 3

вы не можете полагаться на левой: 37%; чтобы центрировать ваш элемент на разных размерах экрана. Попробуйте left: 0; text-align: center; width: 100%; Это должно содержать элемент .child, центрированный независимо от размера родителя.

Если вам действительно нужна позиция: абсолютная; попробуйте это, иначе пошли с @James Доннелли, ответьте, это тесто.

Удачи и удачи в вашем проекте.

Answer 4

Установка левого и правого полей в положение auto, добавление ширины и использование левого: 0; и справа: 0; должно сработать.

Что-то вроде этого:

.child { 
    position: absolute; 
    top: 0; 
    width:26%; 
    margin: 0 auto; 
    left:0; 
    right:0; 
}