Я хочу поместить элемент HTML в середину страницы, по горизонтали и по вертикали, но мне трудно заставить его выровняться даже по горизонтали. Я хочу центрировать div "контент". Вот мой css:
#background
{
position:absolute;
width:100%;
height:100%;
margin:0px;
padding:0px;
left:0px;
right:0px;
z-index:1;
text-align: center;
}
#content
{
margin-left: auto;
margin-right: auto;
width: 200px;
z-index: 2;
position: absolute;
}
А вот мой HTML:
<html>
<head>
<link REL="STYLESHEET" TYPE="text/css" HREF="style/myStyle.css">
</head>
<body style="padding:0px; margin:0px; overflow:hidden;">
<div id="background"><img src="images/backgroundimage.png" width="100%" height="100%">
</div>
<div id="content">
<p>Here is some content</p>
</div>
</body>
</html>
Поскольку div должен быть позиционирован как абсолютный, сделать это:
margin: 0 auto;
не получится. Я не знаю, что делать. Кроме того, я хочу, чтобы он был в центре страницы по вертикали. Помощь приветствуется, спасибо.
Редактировать:Мне нужно, чтобы фон был в отдельном div, чтобы он -менялся по размеру, а содержимое не отображалось, если положение относительное.