SCSS Translate

Translate

transform: translate를 이용해 텍스트를 중앙에 위치시키기(height:300px)

실험용 텍스트top 50%만으로는 정 중앙으로 못가므로, transform traslate(-50%, -50%)를 이용해 중앙에 위치시킨다.

 

HTML

  <section class="sandbox_section" id="sand7">

    <p>실험용 텍스트</p>

  </section>

 

 

SCSS

#sand7{

    position: relative;

    height: 300px;

    border: 1px solid red;

    p{

        font-size: 60px;

        position: absolute;

        top: 50%;

        left:50%;

        transform: translate(-50%, -50%);

    }

 

 

ON BROWSER