<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?