☰

DIV を水平方向と垂直方向に中央揃えする [重複] 質問する

tag-icon • tag-icon html css center
DIV を水平方向と垂直方向に中央揃えする [重複] 質問する

方法はあるかDIVを垂直方向と水平方向に中央揃えするしかし、これは重要なことですが、ウィンドウがコンテンツより小さい場合、コンテンツは切り取られません div には背景色と幅と高さが必要です。

私はいつも、提供された例のように絶対位置と負のマージンを使用して div を中央に配置してきました。しかし、上部のコンテンツが切り取られるという問題があります。この問題なしで div .content を中央に配置する方法はありますか?

ここで例を見てみましょう:http://jsbin.com/iquviq/1/編集

CS: ...

body { margin: 0px; }

.background {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: yellow;
}

/* 
is there a better way than the absolute positioning and negative margin to center the div .content: div with background color a width and a hight?: 
*/ 


.content {
    width: 200px;
    height: 600px;
    background-color: blue;

    position:absolute;
    top:50%;
    left:50%;
    margin-left:-100px;/* half width*/
    margin-top:-300px;/* half height*/
}

HTML:

<div class="background">
    <div class="content"> some text </div>
</div>

私の質問は、「要素を水平方向と垂直方向に中央揃えにするにはどうすればいいですか？」と重複するものではありません。1- 私の質問は以前にも行われました。（日付を確認してください）。2- 私の質問は、条件として非常に明確に黒で尋ねています。「ウィンドウがコンテンツより小さい場合、コンテンツは切り取られません」

ベストアンサー1

のために最新のブラウザ

余裕があれば、フレックスボックスもありますが、この記事の執筆時点では広くサポートされていません。

HTML:

<div class="content">This works with any content</div>

CS: ...

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

さらに改良するコードペンまたはJSBin

古いブラウザのサポートについては、このスレッドの他の場所を参照してください。

おすすめ記事