ブロックの中央よせのしかた・HTML・CSS

はじめに

今回は、HTMLとCSSについてです。
毎回検索しているので、忘備録として、、、

ブロックの中央よせ（左右）

index.html

<div class="parent">parent
　　　　<div class="child">child</div>
</div>

main.css

.parent{
      height: 200px;
      width: 200px;
      background: blue;
    }

    .child{
      height: 100px;
      width: 100px;
      background: red;
      margin: 0 auto;
    }

ブロックの中央よせ（上下・左右）

index.html

<div class="parent">parent
       <div class="child">child</div>
     </div>

main.css

.parent {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: blue;
      }

      .child {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 100px;
        text-align: center;  /*以下2行で文字を中央よせにする*/
        line-height: 100px;
        background-color:red;
      }