Zentrierter Text in einer quadratischen CSS-Box mit Rahmen?

Question

Ich möchte eine CSS-Box erstellen, um als ein "Logo" Stück oder was hast du, in einem anderen div in der Mitte der Seite zentriert - ich benutze Bootstrap 3, legen Sie die div in einem Container-Flüssigkeit für eine volle Breite Seite, wie ich wollte, und fing an, auf dem Logo Teil davon zu starten.

Mein Code ist wie

.logo{ 

    width: 50rem; 
    height: 50rem; 
    margin: 0 auto; 
    text-align: center; 
    font-size: 15em; 
    font-weight: 100; 
    font-family: 'Raleway' , sans-serif; 
    color: white; 
    border: 14px solid black; 
} 

Aus welchem ​​Grunde auch immer folgt, das eigentlich keinen Platz machen - ich gehe davon aus dem auf dem font-size basiert, aber es scheint, wie die größer die Schrift Geht, geht es nur außerhalb der Box - so kann ich nicht für das Leben von mir herausfinden, wie man sowohl diesen Text vertikal ausrichten und ein perfektes Quadrat um den Text erstellen, während ich dabei bin. Jeder Einblick würde sehr geschätzt werden - danke!

Answer 1

Ich habe ein Container div, das ist im Grunde, dass Ihr Körper sein kann. Die Größe kann angepasst werden.

Dann gibt es die Logo-Klasse. Diese Klasse hat eine relative Breite. In den Beispielen Fall: 50% des übergeordneten Elements (Containerklasse)

Es gibt keine feste Höhe der Box, so dass die Höhe auf dem Text basiert.

Die Box wird in der Mitte durch absolute Positionierung positioniert und transformiert sie wieder.

.container { 
 
    position: relative; 
 
    width: 500px; 
 
    height: 500px; 
 
    background-color: gray; 
 
} 
 
.logo { 
 
    position: relative; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 50%; 
 
    transform: translate(-50%, -50%); 
 
    text-align: center; 
 
    font-size: 3em; 
 
    font-weight: 100; 
 
    font-family: 'Raleway', sans-serif; 
 
    color: white; 
 
    box-sizing: border-box; 
 
    border: 14px solid black; 
 
}

<div class="container"> 
 
    <div class="logo"> 
 
    Some random text goes here? 
 
    </div> 
 
</div>