結構使うのですが、やりたいときには忘れてる上下中央寄せのコードです。
コード
$ tree --dirsfirst
.
├── css
│ └── style.css
└── index.html.container {
display: flex;
/* 左右中央 */
justify-content: center;
/* 上下中央 */
align-items: center;
width: 100%;
height: 100vh;
}
.box {
background-color: red;
width: 300px;
height: 200px;
}<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
<div class="container">
<div class="box"></div>
</div>
</html> index.html を ブラウザで開くと、中央に赤い四角 ( .block クラス ) が表示されます。
コメント