中央寄せまとめ
margin: 0 auto; で中央寄せ
margin: 0 auto;で左右中央寄せにします。
中央寄せする要素の幅を指定してください。
<div class="parent">
<p>margin: 0 auto;</p>
</div>
.parent{
width: 100%;
height: 200px;
padding: 5px;
border: 1px solid #333;
}
.parent p{
width: 60%;
height: 60%;
margin: 0 auto;
border: 3px solid red;
}
margin:auto; で中央寄せ
margin: auto;で上下左右中央寄せにします。
中央寄せにしたい要素にposition: absolute;を指定し、top,bottom,left,rightそれぞれ0を指定します。
中央寄せする要素の幅、高さを指定してください。
<div class="parent">
<p>ブロック要素</p>
</div>
.parent{
width: 100%;
height: 200px;
padding: 5px;
border: 1px solid #333;
position: relative;
}
.parent p{
width: 60%;
border: 3px solid red;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
text-align: center; で中央寄せ
インライン要素のテキストを中央寄せにします。
ブロック要素では中央寄せにならないため、display: inline-block;を指定してインライン要素にします。
<div class="parent">
<p>ブロック要素</p>
</div>
.parent{
height: 200px;
padding: 5px;
border: 1px solid #333;
}
.parent p{
width: 60%;
border: 3px solid red;
display: inline-block;
text-align: center;
}
vertical-align: middle;
display: table;を適用した上で、vertical-align: middle;を適用することで縦方向を中央寄せにします。
<div class="parent">
<p>ブロック要素</p>
</div>
.parent{
height: 200px;
padding: 5px;
border: 1px solid #333;
}
.parent p{
width: 60%;
height: 150px;
border: 3px solid red;
display: table-cell;
vertical-align: middle;
}
line-height
heightとline-heightを同じ値に指定することで縦方向を中央寄せにします。
<div class="parent">
<p>ブロック要素</p>
</div>
.parent{
height: 200px;
padding: 5px;
border: 1px solid #333;
}
.parent p{
width: 60%;
border: 3px solid red;
height: 150px;
line-height: 150px;
}
padding
幅や高さを指定せず、paddingで余白を調整して中央寄せにします。
<div class="parent">
<p>ブロック要素</p>
</div>
.parent{
height: 200px;
padding: 5px;
border: 1px solid #333;
}
.parent p{
border: 3px solid red;
padding: 50px;
}
transform
横方向は、left: 0; と transform: translateX(-50%);を指定して中央寄せにして、縦方向は、top: 0; と transform: translateY(-50%);を指定して中央寄せにします。
<div class="parent">
<p>ブロック要素</p>
</div>
.parent{
height: 200px;
padding: 5px;
border: 1px solid #333;
position: relative;
}
.parent p{
border: 3px solid red;
position: absolute;
width: 60%;
height: 60%;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
display: flex;
align-items: center; で縦方向に中央寄せ、justify-content: center; で横方向を中央寄せにします。
<div class="parent">
<p>ブロック要素</p>
</div>
.parent{
height: 200px;
border: 1px solid #333;
display: flex;
align-items: center;
justify-content: center;
}
.parent p{
border: 3px solid red;
width: 60%;
height: 60%;
}
まとめ
CSSで中央寄せにする方法はたくさんあって困りますよね。
その場に合った、適切な方法で中央寄せするように心がけましょう。
コメント