web-dev-qa-db-ja.com

Safariでフレックスコンテナの絶対位置にある子を中央に配置するにはどうすればよいですか？

画像とテキストの両方を含むコンテナがあります。画像の中央でテキストを垂直方向と水平方向の中央に配置したいと思います。

最も簡単で前向きな方法は、Flexboxとテキストの絶対配置を使用することだと思われます。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.text {
  position: absolute;
}
<div class='container'>
  <div class='text'>
    This should be centered
  </div>
  <img src="https://placehold.it/250x250" />
</div>

テキストは両方の軸の中央に配置されます。これは、Safariを除くすべての最新のブラウザで機能するようです。

Safariはテキストをまったく中央に配置していないようです。通常の絶対位置の要素が非フレックスボックスレイアウトにあるように、コンテナの左上に配置されているだけです。

Safari（間違っている）：

enter image description here

他のすべてのブラウザ（正しい）：

enter image description here

Flexboxは本当にプライムタイムの準備ができていると思いましたが、iOSでSafariを使用している人の数を考えると、これは大したことではないようです。コンテンツを水平方向と垂直方向に中央揃えにすることは、Flexboxが得意とすることです。

ここでの私の唯一の本当の選択肢は、Flexboxを使用せずに次を使用することです。

.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

しかし、進歩的な理由から、私はむしろFlexboxを使用したいと思います。

ここで足りないものはありますか？私がそれを求めるのは嫌いですが、ここにSafariのみの回避策がいくつかありますか？ 「フレックスボックスを使用しない」以外に、これに対する解決策はありますか。それが2017年半ばの答えである場合、それは失望するでしょう。

参考のためのJSFiddle： https://jsfiddle.net/z7kh5Laz/4/

htmlcsssafariflexboxmobile-safari
5
Jake Wilson

Flexboxと絶対配置に関しては、すべきこととすべきでないことがいくつかあります。この場合、Safariは他のブラウザーが行う絶対位置の要素を中央に配置しません。

後者は前者に影響を与えないため、Flexboxとtransform: translateを組み合わせることができます。また、時が来れば、すべてFlexbox =単独で、transform/left/topの部分を削除できます。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
<div class='container'>
  <div class='text'>
    This should be centered
  </div>
  <img src="https://placehold.it/250x250"/>
</div>
24
LGSon

敬意を表して、あなたの質問にはいくつかの間違った仮定があります：

  • "Safari（間違った）：[画像]"-Safariは必ずしも間違っているわけではありません。
  • "他のすべてのブラウザ（正しい）：[画像]"-他のブラウザは必ずしも正しいとは限りません。
  • "私はFlexboxは本当にプライムタイムの準備ができていたと思いました。"-そうです。 ブラウザの98％がflexboxをサポートしています 。
  • "コンテンツを水平方向と垂直方向に中央揃えにすることは何かFlexboxが得意なはずです。"-そうです。

ここで足りないものはありますか？

はい、絶対配置されたフレックスアイテムがフレックスプロパティを無視するという仕様の部分。

4.1。絶対位置のフレックスチルドレン

フレックスコンテナの絶対配置された子は、フレックスレイアウトに参加しません。

一部のブラウザが絶対位置のフレックスアイテムにフレックスプロパティを適用することを選択した場合、それが彼らの選択です。しかし、ブラウザがそのような要素のflexプロパティを無視する場合、それは必ずしもそれらが仕様に違反していることを意味するわけではありません。

仕様のセクション全体を読んでも、明確な正誤はないようです。

より安定した信頼性の高いソリューションを得るには、フレックスプロパティを使用して流出要素を配置しないでください。代わりにCSS配置プロパティを使用してください。

10
Michael_B