sizzF의 프로그래밍 공부

가로 가운데정렬

<div style="text-align:center;"></div>

세로 가운데정렬

<style>
.center {
	position: relative;
    top: 50%;
    transform: translateY(-50%);
}
</style>
<div class="center"></div>
    

마진상쇄 예시

첫번째 div에는 margin-bottom 20px, 두번째 div에는 margin-top 20px를 줘서 총 40px의 마진이 생겨야하지만 마진상쇄가 일어나 20px밖에 표시가 안됨

See the Pen yLYvYgN by sizzF (@sizzf) on CodePen.

display: inline-block; width:100%; 로 해결

See the Pen JjYpYGW by sizzF (@sizzf) on CodePen.