18

div を常に水平方向と垂直方向の中央に配置したい。

ウィンドウの幅を縮小/拡大することができ、div は常にウィンドウの中央に留まるように応答します

.cent
{
  height:50px;
  width:50px;
  background-color:black;
  margin:auto;
}

これは私が現在持っているもののJSFiddleの例です。しかし、divを垂直方向にも中央に配置したいので、ウィンドウの高さを増減すると、divはウィンドウの中央にとどまって応答します。

例に関しては、ブラックボックスを常に水平方向の中央にとどまるのと同じように、ウィンドウのサイズ変更時に垂直方向の中央に配置したいと考えています。

4

8 に答える 8

1

デモリンクはこちら

.cent
{
    height:50px;
    width:50px;
    background-color:black;
    margin:auto;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-25px;
    margin-top:-25px;
}
于 2013-07-08T06:28:49.353 に答える
1

これを試して

position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
于 2013-07-08T06:24:34.630 に答える
0

これを試して

http://jsfiddle.net/tvuS6/4/

      .cent
    {
    height:50px;
    width:50px;
    background-color:black;
    margin-left: -150px;
    margin-top: -150px;
   margin:auto;
    position:absolute;
    top:50%;
    left:50%;
    }
于 2013-07-08T06:26:45.473 に答える
0 
.cent
{
  height:50px;
  width:50px;
  background-color:black;
  position:absolute;
  left:50%;
  top:50%;
  margin: 0 auto;
}
于 2013-07-08T06:56:56.257 に答える
0

通常margin: 0 auto;、水平方向の位置合わせとvertical-align: middle垂直方向の位置合わせを行います。私はそれを試しましたが、動作しません。

以下を試してくださいcss

.cent {
    height: 50px;
    width: 50px;
    background: #222;
    position: absolute;
    margin: -50px 0 0 -50px;
    left: 50%;
    top: 50%;
}

JSFiddleで確認してください。

トリック チェックの詳細については、Dead Center an Elementを参照してください。

于 2013-07-08T06:57:05.213 に答える
0

これをテストする

.cent {
    width: 50px;
    height: 50px;
    background-color: black;

    position:absolute;
    left:0; 
    right:0;
    top:0; 
    bottom:0;
    margin:auto;

    max-width:100%;
    max-height:100%;
    overflow:auto;
}

ここに例があります：http://jsbin.com/iquviq/30/edit

于 2013-07-08T06:23:03.323 に答える
0

これをチェックして 

 .cent
   {
      height:50px;
      width:50px;
      background-color:black;
      margin:auto;
      margin-top:50%;
   }
于 2013-07-08T06:23:22.110 に答える