<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf8">
<link rel="Stylesheet" type="text/css" href="style.css">
<title>TEST</title>
<style>
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 1.5em;
vertical-align: baseline;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-family: arial;
font-weight: bold;
}
body {
font-size: 70%;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
vertical-align: middle;
}
@media only screen and (min-width: 50em) {
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="cell">
<img src="abc.svg" style="width: 100%; height: 100%">
</div>
</div>
</div>
</body>
</html>
IMG inaczej się zachowuje podczas regulowania wymiarów okna przeglądarki gdy jest w layoutcie tabelowym, niż gdy występuje samodzielnie. W drugim przypadku wymiary obrazka są elastyczne, nigdy nie powodują pojawienia się scrollbarów, ale...nie jest on wyśrodkowany w pionie...i na odwrót. Jak połączyć te dwa rozwiązania przy zachowaniu ich pozytywnych cech?