Corredor

ウェブ、プログラミングの勉強メモ。

iPhone6Plus Safari の縦表示の時だけ position:absolute; で画面の左右中央揃えにならない

iPhone6Plus Safari の縦表示の時だけ、position:absolute; で画面の左右中央揃えにしたい要素が中央揃えになってくれない。

イメージはこんな感じ。.boxposition: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 させた要素は正しく左右中央表示にならないようである。

詳しい原因、より良い回避方法などご存知の方がいたら教えてください。