この記事について
CSSで要素を上下左右中央に寄せて配置する方法を毎回ググってる&方法がバラバラになっていたので、メモを残しておく。
基本的なやり方
親に以下を指定する。これだけ。
display: flex-
justify-content: center(左右中央) -
align-items: center(上下中央)
index.html
<body>
<div class="parent">
<p>あいうえお</p>
<p>かきくけこ</p>
<p>さしすせそ</p>
</div>
</body>
<style>
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: gray;
}
p {
width: 150px;
background-color: pink;
margin: 5px;
}
</style>
見た目はこんな感じになる。
縦並びを維持したまま上下左右中央寄せする
pタグ3つをさらにdivタグで囲んでdisplay: flexが効く子要素を1つにすればOK
index.html
<body>
<div class="content">
<div>
<p>あいうえお</p>
<p>かきくけこ</p>
<p>さしすせそ</p>
</div>
</div>
</body>
<style>
.content {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: gray;
}
p {
width: 150px;
background-color: pink;
margin: 5px;
}
</style>
見た目はこんな感じになる。
flex-directionを指定する
flex-directionを親に指定することで、display: flex使用時の子要素の並び方を変更できる。
1つ前のやつと違って、divタグを追加する必要がないので、階層が余計に深くならずに済む。
index.html
<body>
<div class="parent">
<p>あいうえお</p>
<p>かきくけこ</p>
<p>さしすせそ</p>
</div>
</body>
<style>
.parent {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 300px;
background-color: gray;
}
p {
width: 150px;
background-color: pink;
margin: 5px;
}
</style>
見た目は1つ前のやつと同じになる。
