画像をセンター寄せにしたい

Question

スマホとPCで表示分けをしており、
スマホの時はセンター寄せになるのですが(そう見えているだけかもしれない)、
PC表示だと、画面サイズを広げた時にだんだんとセンターからズレてきます。(％で指定してるから？)

<div class="detail">を、PC表示の時もセンターにするにはどのようにすればよいでしょうか？

以下、現在のコードになります。

<header>
	<div class="s01">
		<div class="detail">
			<img src="logo.png" alt="ロゴ">
		</div>
	</div>
</header>

.s01{
	background-color: #ffffff;
	border-bottom: 1px solid #313131;
	height: 60px;
	top: 0;
	max-width: 750px;
	margin: auto;
}

.detail {
    position: absolute;
    top: 19px;
    left: 42%;
    width: 200px;
}

@media (max-width: 767px) {
	.detail {
 	   position: absolute;
 	   top: 20px;
		left: 30%;
		max-width: 40%;
	} 
}

Answer 1

.detail {
    position: absolute;
    margin: auto;
    top: 19px;
    left: 0;
　　right: 0;
    width: 200px;
}

でどうでしょうか。

参考：position:absolute で中央に配置するやり方 | YouKnow.jp

Comments

[chanmar]

素早いご回答誠にありがとうございます。
margin:auto; でならなかったので色々いじってみたらどうやら、他のものが邪魔していたみたいで、position:relative; の方法でセンター寄せにすることが出来ました。