web-dev-qa-db-ja.com

CSS 3を使用して垂直に整列

CSS 3では、ブロック要素を垂直に配置する方法はありますか？例はありますか？ありがとうございました。

csshtmlvertical-alignmentalignment
72
tho

最近この問題を見て、試してみました：

HTML：

<body>
    <div id="my-div"></div>
</body>

CSS：

#my-div {               
    position: absolute;
    height: 100px;
    width: 100px;    
    left: 50%;
    top: 50%;
    background: red;
    transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

フィドルは次のとおりです。

http://jsfiddle.net/sTcp9/6/

固定寸法の代わりに「幅/高さ：自動」を使用する場合でも機能します。 Firefox、Chrome、およびIE（* gasp *））の最新バージョンでテスト済み。

83
Charlie

注：この例では、 フレキシブルボックスレイアウトモジュールのドラフトバージョン を使用しています。互換性のない 現代の仕様 に置き換えられました。

Box-alignプロパティとbox-packプロパティを一緒に使用して、divボックスの子要素を中央に配置します。

例：

div
{
width:350px;
height:100px;
border:1px solid black;

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}
34
Crashalot

Flexboxの使用：

.container {
    display: flex;
    /* Vertical align: */
    align-items: center;
    /* Horizontal align: */
    justify-content: center;
}

jsFiddle： http://jsfiddle.net/maars/8Uyvf

ブラウザのサポート： http://caniuse.com/flexbox

32
Andrii Nemchenko

いくつかの方法：

1。絶対位置決め-この作業を行うには、宣言された高さが必要です：

<div>
   <div class='center'>Hey</div>
</div>

div {height: 100%; width: 100%; position: relative}
div.center {
     width: 100px;
     height: 100px;
     top: 50%;
     margin-top: -50px;
}

*2。ディスプレイを使用：テーブル http://jsfiddle.net/B7CpL/2/ *

<div>
     <img src="/img.png" />
     <div class="text">text centered with image</div>
</div>


div {
     display: table;
     vertical-align: middle
}

div img,
div.text {
     display: table-cell;
     vertical-align: middle
}
  1. ディスプレイを使用したより詳細なチュートリアル：テーブル

http://css-tricks.com/vertically-center-multi-lined-text/

9
j-man86

CSSでdivを垂直方向および水平方向に整列させる簡単な方法があります。

Divに高さを付けて、このスタイルを適用するだけです

.hv-center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

これが役に立てば幸いです。

2
Edouard Kombo

私はいつも この記事 のチュートリアルを使って物事を集中させています。それは素晴らしい

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

重要なルールは次のとおりです。

  1. コンテナを相対的に配置します。これにより、コンテナは絶対配置要素のコンテナであると宣言されます。
  2. 要素自体を絶対位置に配置します。
  3. 「トップ：50％」でコンテナの半分下に置きます。 （ここで50％ 'はコンテナの高さの50％を意味することに注意してください。）
  4. 平行移動を使用して、要素をその高さの半分だけ上に移動します。 （「translate（0、-50％）」の「50％」は、要素自体の高さを指します。）
2
Mr Neo

これも完璧に動作してみてください：

html：

   <body>
    <div id="my-div"></div>
   </body>

css：

#my-div {               
    position: absolute;
    height: 100px;
    width: 100px;    
    left: 50%;
    top: 50%;
    background: red;
    display: table-cell;
    vertical-align: middle

}
0
Mr.G