<head>
<style>
body{
margin: 0;
padding: 0; }
html, body { height: 100%; padding: 0; margin: 0; }
div { width: 50%; height: 50%; float: left; }
#solust { background: #777; }
#sagust { background: #333; }
#solalt { background: #333; }
#sagalt { background: #777; }
</style>
</head>
<body>
<div id="solust">
<a href="#"><img src="https://cdn.r10.net/modern/img/logo/svg/light.svg"></a>
</div>
<div id="sagust">
<a href="#"><img src="https://cdn.r10.net/modern/img/logo/svg/light.svg"></a>
</div>
<div id="solalt">
<a href="#"><img src="https://cdn.r10.net/modern/img/logo/svg/light.svg"></a>
</div>
<div id="sagalt">
<a href="#"><img src="https://cdn.r10.net/modern/img/logo/svg/light.svg"></a>
</div>
</body> <head>
<style>
body{
margin: 0;
padding: 0; }
html, body { height: 100%; padding: 0; margin: 0; }
div { width: 50%; height: 50%; float: left; }
#solust { background: #777; }
#sagust { background: #333; }
#solalt { background: #333; }
#sagalt { background: #777; }
</style>
</head>
<body>
<div id="solust">
<center><a href="#"><img src="1.png"></a></center>
</div>
<div id="sagust">
<center><a href="#"><img src="2.png"></a></center>
</div>
<div id="solalt">
<center><a href="#"><img src="3.png"></a></center>
</div>
<div id="sagalt">
<center><a href="#"><img src="4.png"></a></center>
</div>
</body>resimleri yatay ortaladım fakat dikey nasıl ortalayabilirim ?