[解決済み] DIVを水平方向と垂直方向にセンタリングする [重複]。

質問

を行う方法はありますか？ <強い DIVを縦と横にCENTERする が、重要なのは、その ウィンドウがコンテンツより小さい場合、コンテンツがカットされることはありません。 divには背景色とwidth, hightを指定する必要があります。

私はいつも、提供された例のように絶対位置とネガティブマージンを使って、divを中央配置にしています。しかし、それは上のコンテンツをカットするという問題があります。この問題なしにdiv .contentを中央に配置する方法はありますか？

ここに例があるので、遊んでみてください。 http://jsbin.com/iquviq/1/edit

CSSです。

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>

私の質問は、"How to center an element horizontal and vertically? 1- 私の質問は、以前に質問されたものです。(日付をチェックしてください)。2- 私の質問は、非常に明確に、黒で条件として尋ねています："ウィンドウがコンテンツよりも小さい場合、コンテンツはカットされません"。

解決方法は？

いろいろと試した結果、うまくいく方法を見つけました。もし誰かの役に立つのであれば、ここで共有します。ここで動作しているところを見ることができます。 http://jsbin.com/iquviq/30/edit

.content {
        width: 200px;
        height: 600px;
        background-color: blue;
        position: absolute; /*Can also be `fixed`*/
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        /*Solves a problem in which the content is being cut when the div is smaller than its' wrapper:*/
        max-width: 100%;
        max-height: 100%;
        overflow: auto;
}