コンテナは幅と高さを設定しません。幅と高さはテキストによってサポートされます。
HTMLインフラストラクチャは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<title>flex</title>
<style>
.outside{
width:400px;
height:400px;
background-color:lightblue;
}
.inside{
background-color:orange;
}
</style>
</head>
<body>
<div class="outside"><div class="inside">テ キ ス ト は水平方向 と 垂直方向の中央に配置す る 。</div></div>
</body>
</html>
方法 1
テキストがセンタリングされている：コンテナがテキストによって保持されているため、テキストはすでにセンタリングされています。transform:translate(-50%,-50%);コンテナが中央揃え：絶対配置を使用し、それを修正するために使用します。
.outside{
position:relative;
}
.inside{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
方法 2
text-centred: コンテナに text-align:center を設定します。
Container centred: コンテナの親コンテナに設定します。display:flex;justify-content:center;align-items:center;
.outside{
display:flex;
justify-content: center;
align-items:center;
}
.inside{}
コンテナは、固定幅と高さを設定
一行テキス ト
HTMLインフラストラクチャは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<title>flex</title>
<style>
.outside{
width:400px;
height:400px;
background-color:lightblue;
}
.inside{
width:200px;
height:200px;
background-color:orange;
}
</style>
</head>
<body>
<div class="outside"><div class="inside">テ キ ス ト は水平方向 と 垂直方向の中央に配置す る 。</div></div>
</body>
</html>
方法 1
テキスト中央揃え：コンテナに設定text-align: center; line-height: コンテナの高さ px;transform:translate(-50%,-50%);margin-left:コンテナの幅の50%，margin-top:コンテナの高さ50%;コンテナ中央揃え: 絶対配置を使用し、または
.outside{
position:relative;
}
.inside{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
line-height: 200px;
text-align:center;
}
方法 2
テキスト中心：コンテナに設定text-align: center; line-height: コンテナの高さ px;
Container centred: コンテナの親コンテナに設定します。display:flex;justify-content:center;align-items:center;
.outside{
display:flex;
justify-content:center;
align-items:center;
}
.inside{
line-height: 200px;
text-align:center;
}
複数行テキス ト
HTMLインフラストラクチャは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<title>flex</title>
<style>
.outside{
width:400px;
height:400px;
background-color:lightblue;
}
.inside{
width:200px;
height:200px;
background-color:orange;
}
</style>
</head>
<body>
<div class="outside"><div class="inside">テ キ ス ト は水平方向 と 垂直方向の中央に配置す る 。<br>テ キ ス ト は水平方向 と 垂直方向の中央に配置す る 。</div></div>
</body>
</html>
方法 1
テキスト中央揃え：コンテナに設定display: flex;justify-content:center; align-items:center;transform:translate(-50%,-50%)margin-left:コンテナの幅の50%，margin-top:コンテナの高さ50%;コンテナ中央揃え：絶対位置決めを使用し、または
.outside{
position:relative;
}
.inside{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
display:flex;
justify-content: center;
align-items:center;
}
方法 2
テキスト中心：コンテナに設定display: flex;justify-content:center; align-items:center;
Container centred: コンテナの親コンテナに設定します。display:flex;justify-content:center;align-items:center;
.outside{
display:flex;
justify-content:center;
align-items:center;
}
.inside{
display:flex;
justify-content: center;
align-items:center;
}
概要
一般的に、テキストをセンタリングするには2つの方法があります：
- テキストのコンテナを
text-align: center; line-height: コンテナの高さ px; - テキストのコンテナを
display:flex;justify-content:center;align-items:center;
コンテナを中央に配置するには3つの方法があります：
- テキストのコンテナを
transform:translate(-50%,-50%); - テキストのコンテナを
margin-left:コンテナの幅の50%，margin-top:コンテナの高さ50%; display:flex;justify-content:center;align-items:center;テキス ト の コ ン テナの親コンテナに設定 （幅 ・ 高 さ が既知のテ キ ス ト コ ン テナ と 、 幅 ・ 高 さ が未知のテ キ ス ト コ ン テナの両方に使えます）
