jqueryを使ったロゴのフェードアウト

前提・実現したいこと

現在、jqueryを使い、サイトを読み込んだ最初に、全画面の中央でロゴをフェードアウトさせたいです。

発生している問題・エラーメッセージ

現在の問題点は、ちゃんと思うように表示されてはいるのですが、中央(縦、横ともに)に表示されていないという問題です。ロゴの左の部分が途切れてしまい、ロゴが中心にきません。

エラーメッセージ

エラーメッセージは表示されているので、ありません。

該当のソースコード

html
※画像のurlは控えさせていただいています。

<center><div class="start">
    <p><img src="#" alt="ロゴ画像" class="img_logo"></p>
</div></center>

jquery

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
	$(function() {
	setTimeout(function(){
		$('.start p').fadeIn(1900);
	},990); //0.5秒後にロゴをフェードイン!
	setTimeout(function(){
		$('.start').fadeOut(500);
	},3500); //2.5秒後にロゴ含め真っ白背景をフェードアウト！
});
</script>

css

.start {
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
}
.start p {
	position: fixed;
	left: 30%;
	top: 30%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	width: 280px;
}

試したこと

試した事としては、まずhtmlに<center>のタグを記入しました。しかし、効果はありません。

補足情報（FW/ツールのバージョンなど）

サイトにおとづれた時に、最初にロゴがフェードダウンさせたく（参考サイトは、下記に記載しています。）、行ったのですが画面の中心に来ません。
アクセスする端末の画角にも対応できるコードを教えてもらいたいです。

現在の状況：
なお、ロゴの写真は控えさせていただいております。

このように、中心にきておらず、画面からはみ出して、ロゴが表示されている状況です。

参考サイト： https://vier-kt.com/demo/post-11/

是非、ご回答お願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

translate(-50%, -50%) するなら left/top は 50% です。

CSS
1.start p {
2    position: fixed;
3    left: 50%;
4    top: 50%;
5    transform: translate(-50%, -50%);
6    display: none;
7    z-index: 9999;
8    width: 280px;
9}