web-dev-qa-db-ja.com

position：relativeを使用したCSS中央アイテム。

CSSの達人に質問があります！

絶対位置にあるdivの上にマウスを移動すると表示されるメニューがあります。絶対divは1ページに複数回表示され、1つのインスタンスで複数のサイズで表示されるため、すべてのメニュー項目を相対的に配置する必要があります。

親divのサイズがわからない場合、「position：relative」を使用して複数のアイテムを垂直方向と水平方向の両方に中央揃えするにはどうすればよいですか？

私は負のマージンを持つ「position：absolute」トリックを知っていますが、この状況では異なる何かが必要です。

あなたの助けは大歓迎です。

編集：

コードは次のとおりです。

.OuterCase { 
  position  : absolute; 
  width     : 100%;  
  height    : 100%; 
  text-align: center;
}

.InnerItem  { 
   width  : 38px;
   height : 38px;
   display: inline-block;
}

アイテムを水平方向の中央に配置し、垂直方向を取得するのは難しいと思います。ありがとう！

csspositionalignmentcenterrelative
58
Flippinmonk

はるかに簡単：

position: relative; 
left: 50%;
transform: translateX(-50%);

これで、親要素の中央に配置されました。垂直方向にもできます。

39
Hexxefir

または、 CSS3 Flexible Box Model を使用することもできます。以下のようにコンテンツを中央に適用できる柔軟なレイアウトを作成するのに最適な方法です。

#parent {
    -webkit-box-align:center;
    -webkit-box-pack:center;
    display:-webkit-box;
}
25
DADU

比較的（またはそうでなければ）配置されたdivがある場合は、margin:autoでその中に何かを中央に置くことができます

垂直方向のセンタリング は少し巧妙ですが、可能です。

13
spraff

calcを使用して、要素を中心に対して配置できます。たとえば、要素200pxを中心から右に配置する場合は、次のようにします。

#your_element{
    position:absolute;
    left: calc(50% + 200px);
}

これを忘れないで

記号+および-を使用する場合は、記号と数字の間に1つの空白スペースが必要ですが、記号*および/を使用する場合、空白は必要ありません。

12
Matija

別のオプションは、要素を垂直方向に中央に配置する追加のラッパーを作成することです。

#container{
  border:solid 1px #33aaff;
  width:200px;
  height:200px;
}

#helper{
  position:relative;
  height:50px;
  top:50%;
  border:dotted 1px #ff55aa;
}

#centered{
  position:relative;
  height:50px;
  top:-50%;
  border:solid 1px #ff55aa;
}
<div id="container">
  <div id="helper">
    <div id="centered"></div>
  </div>
<div>
0
Paweł