[HTML, CSS] HTML 요소를 중앙정렬하는 방법

0. HTML 요소

inline VS block

 

- inline : 하나의 태그가 자신의 width만큼(내부 컨텐츠만큼)만 차지하는 덩어리

  <span>,<a>,<br>,<em>,<strong>,<input>,<label>,<img>

- block : 하나의 태그가 자신의 width와 상관없이 좌우공간을 모두 차지하는 덩어리

  <div>,<table>,<h1>~<h6>,<p>,<form>,<ul>,<ol>,<li>,<dl>,<dt>,<dd>,<pre>,<blockquote>등

 

HTML tag는 block 이 대다수를 차지하므로, 예외적으로 자주 쓰는 <span>, <a>, <img> 정도가 inline에 해당한다~ 정도만 알고 있으면 될 것 같습니다.

 

1. 중앙정렬 - inline 요소의 경우

 

<div class="container">
  <span class="text">bring me center!!</span>
</div>

이 글씨를 박스의 정중앙에 위치하게 하고 싶습니다.

span은 inline 요소에 해당하며, inline 요소를 중앙정렬할 경우는

.container {
  /* default */
  height: 60px;
  width: 300px;
  border: 2px solid black;
  background-color: aquamarine;

  /* inline요소 중앙정렬하기 - 부모 요소에 css 속성 부여! */
  /* 1. 수평 정렬 */
  text-align: center;
  /* 2. 수직 정렬 - 부모의 height와 동일하게! */
  line-height: 60px;
}

 

2. 중앙정렬 - block 요소의 경우

 

<div class="container">
  <div class="box"></div>
</div>

이 형광색 박스를 배경의 정중앙으로 옮기고 싶습니다.

box가 div, 즉 block 요소입니다. 이 경우에는 position을 이용할 수 있습니다.

.container {
  /* default */
  height: 200px;
  width: 700px;
  background-color: gray;

  position: relative;
}

.box {
  /* default */
  background-color: aquamarine;
  border: 2px solid black;
  font-size: 1.5rem;
  width: 100px;
  height: 100px;

  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}