Данная небольшая заметочка поможет вам разобраться, как можно легко и просто выровнять абсолютно позиционированный элемент (HTML блок) при помощи стилей CSS.
Мы имеем следующий отрезок HTML кода:
<div id="container"> <div id="center-blok"></div> </div>
И следующие стили:
#container{
width: 500px;
height: 300px;
background-color: #1c1c1c;
#center-blok{
width: 50px;
height: 50px;
background-color: #1c9ab1;
}
Для выравнивания блока по центру по горизонтали добавляем следующие стили:
#container{
width: 500px;
height: 300px;
background-color: #1c1c1c;
position: relative;
}
#center-blok{
width: 50px;
height: 50px;
background-color: #1c9ab1;
position: absolute;
margin: auto;
left: 0;
right: 0;
}
Чтобы выровнять нужный блок не только по горизонтали, но и по вертикали достаточно добавить еще пару стилей:
#container{
width: 500px;
height: 300px;
background-color: #1c1c1c;
position: relative;
}
#center-blok{
width: 50px;
height: 50px;
background-color: #1c9ab1;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
HTML файл целиком:
<html>
<head>
<title>Выравнивание абсолютно позиционированных блоков по центру</title>
<style>
#container{
width: 500px;
height: 300px;
background-color: #1c1c1c;
position: relative;
}
#center-blok{
width: 50px;
height: 50px;
background-color: #1c9ab1;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="container">
<div id="center-blok"></div>
</div>
</body>
</html>
Вот и все. Надеюсь, информация была для вас полезной. Если что-то непонятно, оставляйте свои вопросы в комментариях к записи, отвечу с удовольствием.
Спасибо!=)