css - ブラウザウィンドウの境界 (垂直および水平) に中央の div を維持する方法は?

Question

画像とリンクの両方が常にブラウザウィンドウにとどまるようにしようとしています。これはサイトです。iPad にロードすると、図のように中央のコンテンツがウィンドウよりも大きくなります。

のように表示したいと思います（明らかに黒い枠はありません）。これは可能ですか？

Answer 1

追加のマークアップなしで要素を中央に配置する秘訣は、以下を使用することtranslateです。

div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

これがフィドルです：http：//jsfiddle.net/QE8KV/

---

PSベンダープレフィックスを忘れないでください。

Answer 2

Joseph Silberの答えの問題は、ウィンドウがコンテンツよりも小さい場合、コンテンツが切り取られることです。

次に、フローティングでトリックを使用できます：http: //jsfiddle.net/QE8KV/2/

HTML：

<div id="top"></div>
<div id="center">Text</div>

CSS：

html,body{
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#top {
    float: left;
    height: 50%;
    margin-top: -150px;
    width: 100%;
}
#center{
    background: #2D285E;
    box-shadow: 1px 1px 4px #231E5C;
    color:white;

    width: 300px;
    height: 300px;
    margin:0 auto;
    clear:both;
}