常用CSSレイアウト
一、垂直水平中央
1.位置決め方式の実現
親要素スタイルを設定する
position: relative;
サブエレメントエレメントスタイルを設定する
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
2.flexレイアウト実装
親要素を設定するとになります.
display: flex;
justify-content: center;
align-items: center;
3.CSS 3+位置決め実現
親要素スタイルposition: relative;
width: 100%;
height: 300px;
background-color: bisque;
サブエレメントposition: absolute;
top: 50%;
left: 50%;
background-color: aqua;
transform: translate(-50%, -50%);
4.一般CSS実現
親要素スタイルdisplay: table-cell;
width: 800px;
height: 300px;
background-color: bisque;
text-align: center;
vertical-align: middle;
サブエレメントdisplay: inline-block;
height: 80px;
background-color: aqua;
vertical-align: middle;
二、二列レイアウト（幅を決めながら適応）
1.float+margin方式実現
HTML
CSS .left {
float: left;
width: 200px;
height: 300px;
line-height: 300px;
text-align: center;
background: red;
color: #fff;
}
.right {
margin-left: 210px;
height: 300px;
background: yellow;
text-align: center;
line-height: 300px;
}
2.位置決め方式実現
HTML
CSS .box {
position: relative;
}
.left {
position: absolute;
width: 200px;
height: 300px;
line-height: 300px;
text-align: center;
background: yellow;
}
.right {
width: 100%;
height: 300px;
background: red;
text-align: center;
line-height: 300px;
}
2.flexレイアウト実装
HTML
CSS .box {
display: flex;
flex-direction: row;
text-align: center;
line-height: 300px;
}
.left {
width: 200px;
background: red;
}
.right {
flex: 1;
width: 200px;
background: yellow;
}