iPhone6Plus Safari の縦表示の時だけ position:absolute; で画面の左右中央揃えにならない
iPhone6Plus Safari の縦表示の時だけ、position:absolute;
で画面の左右中央揃えにしたい要素が中央揃えになってくれない。
イメージはこんな感じ。.box
は position:absolute;
指定のおかげで Float していて、後続の要素の上に重なって表示されるようなレイアウト。
.box {
position:absolute;
width:500px;
height:50px;
/* 上のような指定がある要素に対して、 */
top:0; left:50%; margin-left:25px; /* としてもダメで、 */
top:0; left:100%; right:100%; /* としてもダメ…。 */
}
.next-element {
padding-top:50px; /* .box の高さ分の余白を空けてある */
}
上のどちらかの指定で、PC の Firefox・Chrome・IE11 は正しく左右中央揃えになっているが、iPhone6Plus の Safari で見たときだけ、左寄りになってしまう。というか、左側は少し見切れているようである。
んで iPhone6Plus を横表示に変えると、その時は正しく中央揃えになっている。
どうやっても解決できないので、position:absolute;
は止めて、左右 margin:auto
とネガティブマージンの併用で回避することにした。
.box {
width:500px;
height:50px;
margin:0 auto -50px; /* 左右 margin:auto で左右中央揃えにし、float と同等の表示にさせるため要素の高さ分のネガティブマージンして後続要素を下に敷かせる */
}
.next-element {
padding-top:50px; /* .box の高さ分の余白を空けてある */
}
iPhone6Plus Safari の縦表示時は、どうも基準となる画面幅が異なるのか、position:absolute;
で float させた要素は正しく左右中央表示にならないようである。
詳しい原因、より良い回避方法などご存知の方がいたら教えてください。