Web白描

中央に配置

★Grid ★Flexbox

中央に配置

Grid
Flexbox
position

Gridで中央配置

display: grid;
place-items: center;
- 「place-items: center;」は「align-items: center;」「justify-items: center;」をまとめている

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap" rel="stylesheet">
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.header {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh;
  background: url(img/06.jpg) no-repeat center top;
  background-size: cover;
}
.text__block {
  width: fit-content;
  padding: 16px 40px 10px;
  background-color: rgba(255, 255, 255, 0);
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
}
h1 {
  font-size: 1.2em;
  font-family: 'Homemade Apple', cursive;
  line-height: 1.2;
}
</style>
</head>
<body>
<header class="header">
  <div class="text__block">
    <h1>HeroHeader</h1>
    <p>タイトルを中央に配置</p>
  </div>
</header>
</body>
</html>

Flexboxで中央配置

display: flex;
justify-content: center;
align-items: center;

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background: url(img/06.jpg) no-repeat center top;
  background-size: cover;
}

positionで中央配置

margin: auto;
widthとheightの値は必須

.header {
  width: 100%;
  height: 100vh;
  background: url(img/06.jpg) no-repeat center top;
  background-size: cover;
}
.text__block {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  padding: 16px 40px 10px;
  background-color: rgba(255, 255, 255, 0);
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
}