DIV 가로 중앙 정렬, 세로 중앙 정렬
코딩을 할 때 가장 기본이 되지만 또 가장 어려웠던 부분이었다. 

 

display:flex;  이 코드를 알고 나서 정말 쉽게 코딩이 가능해졌다.
바깥쪽 div, 즉 부모 div에 display:flex; 를 선언하면. 안쪽 엘리먼트, 즉 자식div에 영향을 준다.  

반응형 레이아웃을 작업할 때 유용하게 쓸수 있는 css입니다.

 

사이트선택 전용 레이아웃을 코딩할때 사이트제목2개를 중앙에 배치하는 부분이 무척 힘들었었는데

display:flex; 코드를 사용하니 쉽게 구현이 가능해 졌다.

 

<style>

.bl-left { position:relative; float:left; width:50%; height:300px; display: flex; justify-content: center; align-items: center; }
.bl-right { position:relative; float:right; width:50%; height:300px; display: flex; justify-content: center; align-items: center; }

.bluelight { position: relative; display: table; width: 150px; height: 150px; }

.bluelight a { display: table-cell; vertical-align: middle;text-align: center; }

</style>

 

        <div class="bl-left">
            <span class="bluelight">
                <a href="#">MH</a>
            </span>
        </div>
        <div class="bl-right">
            <span class="bluelight">
                <a href="#">Moon</a>
            </span>
        </div>

 

위의 코딩으로 완성된 사이트제목2개의 가로,세로 정렬 모습입니다.

[샘플보기]