sou
6/13/2018 - 12:04 AM

要素を水平および垂直の中央に配置

marginを使う方法 子要素に「margin: auto;」を定義します。必要に応じて「text-align:center;」

flexboxを使う方法 親要素に「display:flex;」「justify-content:center;」「align-items: center;」

base.html
content_copyfile_download
<div class="parent one">
  <div class="child">WITH MARGIN</div>
</div>

<div class="parent two">
  <div class="child">WITH FLEX</div>
</div>
base.css
content_copyfile_download
.child {
  display:inline-block;
  font-family: Arial;
  font-weight: bold;
  color: white;
  font-size: 1.5em;
  text-align: center;
}

.parent.one {
  display:flex;
  background: blue;
}

.parent.one .child {
  margin:auto;
}

.parent.two {
  margin-left: 10px;
  display:flex;
  justify-content:center;
  background: red;
  align-items: center;
}