web-dev-qa-db-ja.com

絶対配置されたdivのコンテンツを中央揃え

内部にコンテンツを持つ絶対配置の要素があります。 <h1>またはいくつか<p> 鬼ごっこ。コンテンツの高さはわかりません。

絶対に配置されたdiv内でコンテンツを垂直方向に中央揃えするにはどうすればよいですか？

HTML：

<div id="absolute">
    <div class="centerd">
    <h1>helo</h1>
    <span>hi again</span>
    </div>
</div>

CSS：

#absolute {
    position:absolute;
    top:10px;
    left:10px;
    width:50%;
    height:50%;
    background:yellow;
}

.centerd {
    display:table-cell;
    vertical-align:middle;
}

フィドル

csscss-positioncentering
16
user2324261

display:tableを#absolute divに追加すると、必要なものが得られます。

http://jsfiddle.net/3KTUM/2/

12
Pete

水平および垂直位置の絶対的な真ん中。

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  -webkit-transform: translate(-50%, -50%);
}
<div class="obj">
  <div class="center">Test</div>
</div>
10
Celil Şahin

#absolute divも使用：

display:table;
vertical-align:middle;
text-align:center;

http://jsfiddle.net/3KTUM/4/

6
James Donnelly

これはflexboxでも実行できます。

#absolute {
  align-items: center;
  display: flex;
  justify-content: center;
}
5
Andrés

Div relativeをそのabsolute親にして、text-align: centerを次のように使用するだけです。

.centerd {
    position: relative;
    width: 100%;
    text-align: center;
    /*display:table-cell;
    vertical-align:middle;*/
}

example fiddle を参照してください

2
Nelson

text-align：centerまたはleft：50％を使用

1
santhosh