• CSS

CSS로 DISPLAY 태그를 사용해서 Y축 가운데 정렬 하기

2018-11-09 206

설명

  • 카카오톡 링크

CSS로 DISPLAY:INLINE-TABLE 과 DISPLAY:TABLE-CELL 을 이용하여 가운데 정렬 한 소스입니다.!

소스실행 현황

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

<style>
	.line {display:inline-table; width:100%; height:200px; position:relative; background:#d42525; text-align:center}
	.box {display:table-cell; position:relative; background:#404040; vertical-align:middle}
	.box_inner {display:inline-block; width:100px; height:100px; background:red}
</style>
<div class="line">
	<div class="box">
		<div class="box_inner">
			<span></span>
		</div>
	</div>
</div>