[CSS] 중앙정렬

html

<div class="end-box">

<p>이벤트 종료</p>

</div>

css

.end-box {

display: flex;

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.7);

align-items: center;

}

.end-box p {

color: #fff;

font-size: 4.8rem;

font-weight: 700;

line-height: 5.2rem;

margin: 0 auto;

}

---

+ a 태그가 추가될때

html

<ul class="user-tab-style-title">

<li class="user-tab-style-title-on w50"><a href="#">이벤트01</a></li>

<li class="w50"><a href="#">이벤트02</a></li>

         </ul>

css

.user-tab-style-title li {

display: flex;

float: left;

border: 1px solid #000;

box-sizing: border-box;

background-color: #fff;

align-items: center;

}

.user-tab-style-title li a {

display: block;

width: 100%;

padding: 7.7% 0;

box-sizing: border-box;

color: #010101;

font-size: 3rem;

font-weight: 700;

line-height: 4rem;

text-align: center;

}