잘 안되는 경우가 있습니다..
저 혼자 그럴수도 있지만;;
그럴경우 어떻게 해야할까?? 에 대한 메모를 했습니다.
https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1
https://webdir.tistory.com/31

부모 relative , 자식 absolute

말그대로 부모 태그에
position: relative;
주고 나서
자식 태그에 absolute 를 준다음에
right ,left, top , bottom 값을 주면 됩니다.

//부모
.board_ {
    border: 1px solid gray;
    display: flex;
    position: relative; 
}

//자식

.treads_dot {
    border: 1px solid red;
    width: 28px;
    height: 28px;
    position: absolute;
    right: 10px;
    top: 10px
}

위의 코드처럼 하면 treads_dot 스타일을 준 태그는 오른쪽에 위치되어 집니다.

중앙 정렬

기본적으로 중앙정렬 하면 3대장이라 부르는

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

이녀석들을 주면 됩니다.

또 다른 방법으로 ,

.parent {
 position : relative;
}

.child {
 position : absolute;
 width:50px;
 height:50px;
 background:black;
}

.middle{
 margin: auto auto ;
}

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

이렇게 주면 됩니다.

center

center 라는 태그가 있다.
이 center 라는 태그는 가로 중앙 정렬입니다.
간단하게 사용할 수 있으나 , 권장하지 않는 방법입니다.

그 이유는 html5 에서는 center 태그가 지원되지 않습니다.
지금 현재 표준은 html5 입니다.
center 태그는 html5 이전 버전까지만 지원이 되고 html5 부터는 css 를 이용해야 합니다.

<div style="text-align:center"> </div>
// 혹은
.test {
  text-align: center;
}

를 사용하시면 됩니다.

header 만들기

.header_div {
    background: black;
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    font-weight: bold;
    font-size: 16px;
    color: white;
    display: flex;
    justify-content: center;
}

import React, { Component } from "react";
import "./Header.scss";
class Header extends Component {
  render() {
    return (
      <div className="header_div">
        <p>JAKDU</p>
      </div>
    );
  }
}
export default Header;