position:absoluteのdivを中央揃えにする

これたまにあるんですよね。
ブロック要素の中身をちょっと上にはみだしたい時とか。
前までは外側の要素のpx調べて左にmarginとって誤魔化してたりしたんですけど。

ちなみに以下は失敗パターン。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>absolute中央失敗</title>
<style type="text/css">
.box {
	position: relative;
	width: 600px;
	height: 100px;
	margin: 100px auto;
	background: #333;
}
.item {
	position: absolute;
	width: 100px;
	height: 100px;
	top: -50px;
	margin: 0 auto;
	background: #000;
}
</style>
</head>

<body>


<div class="box">
<div class="item">
</div>
</div>

</body>
</html>

.itemにmargin: 0 auto;つけても中央に来てくれないんですよねぇ～。
f:id:gtweb:20181107183533g:plain

で、これを中央に揃えるには！
追加で、
left: 0;
right: 0;
これを両方入れれば解決出来ます。

以下のような感じ。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>absolute中央成功</title>
<style type="text/css">
.box {
	position: relative;
	width: 600px;
	height: 100px;
	margin: 100px auto;
	background: #333;
}
.item {
	position: absolute;
	width: 100px;
	height: 100px;
	top: -50px;
	margin: 0 auto;
	background: #000;
	left: 0;
	right: 0;
}
</style>
</head>

<body>


<div class="box">
<div class="item">
</div>
</div>

</body>
</html>

バッチリいけました！
f:id:gtweb:20181107183738g:plain