Wie man einen vertikal und horizontal zentrierten boxed div Behälter macht

Question

Ich versuche, ein horizontal und vertikal zentriertes div zu machen, das nicht 100% Breite und Höhe hat, aber ungefähr 80% sowohl Breite als auch Höhe. Ich möchte nur eine Art Box in der Mitte des Ansichtsfensters machen. Ich vermeide vh und vw Einheiten.

fand ich eine Lösung wie folgt aus: -

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

Und die CSS ist

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

Dies funktioniert, aber wenn ich BootStrap3 der .Behälter Klasse, ist dieser Behälter misbehaves verwenden. Der Inhalt überläuft auch. Ich denke, das liegt an der absoluten Positionierung des Containers. Ich will nur ein ganz anderes Konzept. Ich möchte diese Methode wegen der absoluten Positionierung nicht verwenden.

Answer 1

dieses Versuchen

<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

Centre ** es ist immer ein Schmerz in der ein Div. Ich fand diese sehr nützliche Seite: http://howtocenterincss.com/

Probieren Sie es aus. Sie hatten eine sehr einfache Frage, was Sie nicht zentrieren wollen.

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*/; 
}