5

div の垂直方向の配置と中央揃えに関する Q&A とブログ投稿を数え切れないほど読んできましたが、最も単純なケース (空の 20x20 div を html 本文に直接配置) を使用することはできません。

html:

 body
    {
        background-color:DarkGray;
        display:table;
    } 

    .box
    {
        background-color:black;

        display:table-cell
        margin:0, auto;    
        
        width:20px;
        height:20px;
    }
<body>
    <div class="box">
    </div>
</body>

これがJSFiddleです。

4

3 に答える 3

21

display:table悪いです、display:table-cell彼らから離れてください。divこれは、内部を中央に配置する非常に一般的な方法<body>です。要素の上部と左側を50％のポイント内に配置し、 andからandのbody1/2を減算します。widthheightmargin-topmargin-left

.box {
  background-color: black;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  /* -1/2 width */
  margin-top: -10px;
  /* -1/2 height */
}
<body>
  <div class="box">

  </div>
</body>

于 2013-03-10T13:06:04.950 に答える
2

まず、マージンスタイルに構文エラーがあります。

margin: 0, auto;

しかし、次のようにする必要があります。

margin: 0 auto;

垂直位置決めのサポートにより、次のようになります。

html,
body {
  background-color: DarkGray;
  height: 100%;
}

.box {
  position: relative;
  top: 50%;
  margin: -10px auto;
  /* -height/2 */
  width: 20px;
  height: 20px;
  background-color: black;
}
<body>
  <div class="box">
  </div>
</body>

そして、このサイトで議論があります。HTMLのレイアウトにテーブルを使用してみませんか？

于 2013-03-10T13:10:09.240 に答える
1

Tyriar のコードは間違いなく最良のソリューションです。要素は常に中央ではなく側面から整列するため、中央に配置する div の幅の半分にand
を設定することを常に忘れないでください。margin-leftmargin-top

于 2013-03-10T14:00:54.590 に答える