[css] DIV안에 텍스트 중앙정렬 하기 <div>Center Me!</div>

[참고링크]

1. text-center, line-height릉 이용하는 방법

*div or p 등 블럭안에서 텍스트 정렬. (단점: 1줄이 넘어가면 적용 불가능)

html

<div class="box1">
  Center Me!
</div>

css

.box1 {
  width: 200px;
  height: 100px;
  text-align: conter;
  line-height: 100px;
}

2. position을 이용하는 방법

html

<div class="box2">
  <p>Center Me! Center Me! Center Me! Center Me! Center Me! Center Me! Center
     Me! Center Me! Center Me! Center Me! Center Me! Center Me! Center Me!
  </p>
</div>

css

.box1 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: lightblue;
}

3. 그냥 속편하게 flex를 쓰는게 좋을까?

html

<div class="box3">
  <h1 class="title">HELLO THERE!</h1>
  <p>
     Lorem, ipsum dolor sit amet consectetur
     adipisicing elit. Culpa, sunt.
  </p>
</div>

css

.box3 {
  height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

• ⛈ Question

  내가 원하는건 flex로 균등하게 flexbox를 나누고(flex: 1) 그 형태를 유지한채 글씨만 가운데 정렬하는것!!!
  이거 아는 분 댓글 부탁드려요!🙏