枠線を使用した正方形のCSSボックスの中央揃えのテキスト？

Question

私は「ロゴ」のように動作するCSSボックスを作成したいのですが、ページ中央の別のdivに中央揃えされています。私はブートストラップ3を使用しています。私が望むように全幅のページを作り、そのロゴの部分から始めました。

私のコードは、何らかの理由で

.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; 
} 

を次のように、これは実際には、正方形をしないで - 私はこれは、フォントサイズに基づいていると仮定していますが、それは大きなフォントのように思えますそれはちょうどボックスの外側に流出する - 私は私の人生のために、このテキストを垂直方向に整列させ、テキストの周りに完璧な正方形を作成する方法を見つけ出すことができません。どんな洞察力も大変ありがとうございます - ありがとう！

Answer 1

私はコンテナdivを基本的にはあなたの体にすることができます。サイズは調整できます。

ロゴクラスがあります。このクラスは相対的な幅を持ちます。 例の場合：親（コンテナクラス）の50％

ボックスの高さは固定されていないため、高さはテキストに基づいています。

このボックスは、センタートラフの絶対配置に配置され、再度変換されます。あなたは、幅/高さのピクセルを使用することはできません

.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>