1. 수평정렬
<head>
<style>
.horizontal {
text-align: center;
}
</style>
</head>
<body>
<div class="horizontal">
<p>나는 가운데로 갈거야. 수평으로만 이동해줘~</p>
</div>
</body>
2. 수평, 수직정렬
<head>
<style>
.horiPlusVerti {
/*부모 태그에 속하지 않고 독립적인 배치 문법을 부여*/
position: absolute;
/*수평 가운데정렬, 수직 가운데정렬 명령*/
left: 50%;
top: 50%;
/*좌표값으로 태그의 (0,0)값(좌측상위 꼭지점)이 기준이므로 translate로 x축 y축을 이동하여 태그의 중앙이 기준이 되게 설정*/
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="horiPlusVerti">
<p>오 나를 중앙으로 옮겨주오.</p>
</div>
</body>