web-touristВертикално центриране чрез CSS
Автор: emagi
Тъй като сам достигнах до момента, в който ми се наложи да центрирам вертикално, чрез търсене в различни статии и форуми, намерих начин това да стане!
Да предположим, че имаме един DIV (образно ще го наречем mydiv, който искаме да центрираме вертикално!.
Нека той да бъде с размери – ширина 400px и височина 320px:
Ето и как ще стане това центриране:
<html>
<head>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
height:100%;
}
#mydiv {
position:absolute;
width:400px;
height:320px;
text-align:center;/*така центрираме хоризонтално */
top:50%;
left:50%;
margin-top:-160px;/* половината от височината */
margin-left:-200px;/* половината от ширината */
border:solid 2px red;/*само за по-добро очертаване на div-a */
}
-->
</style>
</head>
<body>
<div id="mydiv"><img src="slack1.jpg" width="400" height="320"></div>
</body>
</html>По-този начин DIV-a се центрира и хоризонтално и вертикално!Така и при различните резолюции , този DIV си остава по средата на броузъра!
