縦と横の中央のboxed divコンテナの作成方法

Question

100％の幅と高さを持たない、幅と高さの両方が80％のような、水平方向と垂直方向のdivを作成しようとしています。私はちょうどビューポートの中心にちょうど箱のようなものを作りたいと思います。私はvhとvwのユニットを避けています。

は、私はこのような解決策を見つけた： -

<div class="centered-box"> 
This is a box 
</div> 

とCSSはこの作品

.centered-box { 
margin: auto; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
position: absolute; 
width: 80%; 
height: 80%; 
border: 1px solid black; 
} 

ですが、私はBootStrap3の.containerクラス、このコンテナの誤動作だけを使用する場合。コンテンツもオーバーフローします。私はこれが容器の絶対的な位置付けによるものだと思う。私はちょうど全く異なるコンセプトが欲しい。絶対配置のためにこのメソッドを使いたくない。

Answer 1

この

<div class="centered-box"> 
This is a box 
</div> 

を試してみてのCss

.centered-box { 
    margin: 10% auto; 
    width: 35%; 
    padding: 20px; 
    border: 1px solid black; 
} 

Answer 2

センターは**それは常にAの痛みだDIV。 私はこの非常に便利なサイトを見つけました：http://howtocenterincss.com/

試してみてください。 あなたはtioの答えは、あなたが中心にないことについて非常に簡単な質問を持っていた。

Answer 3

Htmlの

<div class="outer"> 
    <div class="middle"> 
     <div class="inner"> 
     <div align="center"> 
      <h1>The Content</h1> 

      <p>Once upon a midnight dreary...</p> 
     </div> 
     </div> 
    </div> 
</div> 

のCss

.outer { 
    display: table; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 

.middle { 
    display: table-cell; 
    vertical-align: middle; 
} 

.inner { 
    margin-left: auto; 
    margin-right: auto; 
    width: /*whatever width you want*/; 
}