Чтобы расположить контейнер изображения в середине страницы, используйте следующий стиль (обратите внимание, что вам нужно удалить position: fixed; из изображения).
#thumbnailcontainer {
position: relative;
transform: translateY(-50%);
top: 50%;
}
В фрагменте (просмотр в полноэкранном режиме) Iдобавлен <div style="height:100vh;"> для эмуляции большой страницы, которую вы, вероятно, должны удалить для своей собственной страницы.Кроме того, вы должны хранить стили в CSS-файле и HTML-файле в формате HTML, поскольку трудно поддерживать большой BLOB-объект в JavaScript.
$(document).ready(function () {
$("body").prepend('<div style="height:100vh;"><div id="thumbnailcontainer" class="container-fluid"><div class="row"><img id="llthumbnail" class="img-fluid" style = "width: 100%;height: 100%;top: 0;left: 0; right: 0;bottom: 0;cursor: pointer;background:black;padding:0px 100px 0px 100px;" src = "http://w3.org/Icons/valid-xhtml10" ></div></div></div>');
$('#thumbnailPlayIcon').on("click", function () {
thumbnailClick($(this));
});
$('#llthumbnail').on("click", function () {
thumbnailClick($(this));
});
});
#thumbnailcontainer {
position: relative;
transform: translateY(-50%);
top: 50%;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myDiv">
</div>
<div class="skycap-caption" style="display:none"></div>
</body>
</html>