• CSS

CSS로 POSITION:ABSOLUTE 를 사용해서 X축 Y축 가운데 정렬 하기

2018-11-08 227

설명

  • 카카오톡 링크

CSS로 table-cell 을 사용하는게 아닌 POSITION:ABSOLUTE 과 transform 을 사용하여 가운데 정렬하는 소스입니다.!

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<style>
	.line {display:inline-block; width:100%; height:200px; position:relative; background:#d42525}
	.box {display:inline-block; position:absolute; left: 50%; top:50%; transform: translateX(-50%) translateY(-50%); width:100px; height:100px; background:#404040}
</style>
<div class="line">
	<div class="box">
	</div>
</div>