アトリエロワ

cssでdiv等の要素を正方形に固定（レスポンシブ）

div枠を正方形に保ちながら内側の文字を縦横中央にする方法

HTML

<div id="fr">
    <div id="content">中にテキスト</div>
</div>

css

#fr {
    position: relative;
    width: 100%;
}
#fr::before {
    content:"";
    display: block;
    padding-top: 100%; /*高さを幅の100%に固定 正方形は100%*/
}
#content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

上記でできない場合（#contentを変更）

#fr {
    position: relative;
    width: 100%;
}
#fr::before {
    content:"";
    display: block;
    padding-top: 100%;
}
#content {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
}

HOME > html+css > cssでdiv等の要素を正方形に固定（レスポンシブ）

html+css

html+css

+ More