CSS Centering In Vertical

HOW TO CENTER IN VERTICAL

1.table/table-cell

<section class="section-pr" style="height: 640px;">
    <div class="container pr-text-container">
        <div class="pr-table-cell">
            <p class="content">언론보도</p>
            <a class="link" href="#">보러가기</a>
            <p class="content">동영상</p>
            <a class="link" href="#">보러가기</a>
        </div>
    </div>
</section>

2

.section-pr{
    background: url('/KIDMIA/static/img/home/pr.png') no-repeat;
    background-size: cover;
    background-position: center center;
}
.pr-text-container{
    display: table;
    height: 100%;
    width: 100%;
}
.pr-table-cell {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

1

요약하자면,

상위div
display:table;
height:100%;
width:100%;

하위div
display:table-cell;
vertical-align:middle;

2.line-height

a Tag의 경우, div를 씌워서 위와 같은 방법으로 하거나, line-height를 주면 쉽게 정렬할 수 있다.

3.Transform:translateY(value);

검색하다가 여러 번 봤는데, 아직 적용하는 방법을 잘 모르겠다. 다음 기회에 포스팅하겠다.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s