1. 수직정렬
  2. block 자체 수평정렬
  3. inline 수평정렬
  4. 정중앙 정렬(flex)

수직정렬

  1. 바깥 요소(outer)로 감싼다.
  2. height를 설정한다.
  3. 바깥요소에 vertical-align:middle; display:table-cell; 셋팅
1
2
3
<div id="outer" style="height:100px;">
  <span id="inner"></span>
</div>

vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

https://www.w3schools.com/cssref/playit.asp?filename=playcss_vertical-align&preval=25px

또는 flex를 활용

요소에

  1. display:flex; align-items:center 하거나
  2. display:flex; flex-direction:column;justify-content:center;

둘중 하나를 사용

block 자체 수평 정렬

block 요소는 원래 한줄을 다 차지한다. 따라서 요소 자체의 수평정렬이 불가하다. 그렇기 때문에 width를 통해 정렬이 가능하도록 해주고 해주고 왼쪽 오른쪽 마진 값, 또는 float으로 정렬한다.

  • 수평정렬

    • block 요소의 정렬을 위해서는 width 설정이 필요.

    • 가운데 정렬 : 좌우의 margin 값을 auto로 자동 맞춤 margin: 0 auto

    • 왼쪽 오른쪽 정렬 : float: left, right

inline 수평 정렬

  • inline요소의 경우 감싸는 wrapper div 추가가 필요
    • text-align: left,right,center : inline을 감싸고 있는 div에 적용.
1
2
3
<div style="text-align:center;">
  <span>sdfsdf</span>
</div>

수평 수직 정렬

1
2
3
4
5
6
7
8
9
10
11
12
13
.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}

<div class="area">
    울랄라
</div>

flex 이용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#outer {
    display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    border: 1px grey solid;
}

#inner {
    margin: 5px;
    text-align: center;     /* will center text in <p>, which is not a flex item */
}

<div id="outer" style="height:100px;">
  <span id="inner">12345</span>
</div>

Reference

https://www.w3schools.com/cssref/pr_pos_vertical-align.asp

http://inspiredjw.com/entry/CSS%EB%A1%9C-DIV-%ED%83%9C%EA%B7%B8%EB%A5%BC-%EC%83%81%ED%95%98-%EC%A2%8C%EC%9A%B0-%EA%B0%80%EC%9A%B4%EB%8D%B0-%EC%A0%95%EB%A0%AC%ED%95%98%EA%B8%B0

https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically