css - 幅や高さを知らずに絶対位置でセンタリング

Question

オーバーレイを作成しています。ページ全体を50％透明な黒でコーティングするdivがあります。別のdivは、画面の中央、垂直方向、水平方向に配置する必要があります。絶対に配置する必要があります。高さ/幅を知らずにこれを行う方法はありますか？画面の解像度に応じて変化します。高さと幅を知っているときは、絶対測位のセンタリング手法に精通しています（つまり、左：50％、マージン左：-150px、上：50％、マージントップ：-300px;）...しかし、繰り返しになりますが、高さ/幅を知らなくてもこれを行うことはできますか？コードは次のとおりです。

.hiddenBg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 10000;
/*display: none;*/
}

.hiddenBox {
position: absolute;
left: 50%;
margin-left: -200px;
top: 50%;
margin-top: -100px;
width: auto;
height: auto;
background-color: #FF7F00;
border: solid 10px white;
z-index: 10001;
text-align: center;
/*display: none;*/
}

Answer 1

この古い質問に出くわしただけです。CSSを使用してこれを行うには2つの異なる可能性があると思います（ブラウザーのサポートは増えています）。JavaScriptは必要ありません。

1.フレックスボックスでそれを行う

<div class="hiddenBg">
    <div class="hiddenBox">
       Hello
    </div>
</div>

<style>
   .hiddenBg {
      display: flex;
      align-items: center;
      justify-content: center;
   }
</style>

2.絶対+負の変換変換

.hiddenBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

最初の3行では、オブジェクトはで親コンテナの中央に配置され、にtop設定leftされ50%ます。残念ながら、これはオブジェクトの左上隅に適用されます。そのため、視覚的に中央に配置されているようには見えません。4行目は、中心点をオブジェクトの中央に変換することで修正します。この親コンテナは相対的に配置する必要があることに注意してください。

Answer 2

div親と共通のCSSプロパティを使用してこれを行うことができます。どこでも動作するという利点があり、JSやフレックスボックスは必要ありません：

<div id="parent">
    <div id="child">Hello, I am div !</div>
</div>

<style>
    #parent {
        position: relative;
        width: 100%;
        text-align: center;
    }

    #child {
        display: inline-block;
    }
</style>

Answer 3

あなたはjavascriptでそれを行うことができます。幅と高さを動的に取得し、.hiddenbox使い慣れた手法を使用して適切に配置します。遊ぶためのもう1つのオプションがあります。ここの例を確認してください：

body {
  margin: 0;
}

#fade {
  background: #ccc;
  width: 600px;
  height: 200px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

#content {
  background: #fff;
  border: 1px solid #ff0000;
  padding: 20px;
  display: inline-block;
}

<div id="fade">
  <div id="content">
    Something goes here...
  </div>
</div>

jsFiddleで表示

ただし、この例では、親コンテナの正確な幅と高さ（この場合）を知る必要があり.hiddenBgます。％単位では機能しません。

このタスクにjavascriptを使用しても問題がない場合はjavascript、質問にタグを追加してください。jsコードのその部分をお手伝いします。

Answer 4

.hiddenBox {
  position: absolute;
  left: 50%;
  transform: translateX(-50%)
}