CSS
수직 중심 맞춤

비고

디스플레이 중심 : 표

HTML :

<div class="wrapper">
    <div class="outer">
        <div class="inner">
            centered
        </div>
    </div>
</div>

CSS :

.wrapper {
  height: 600px;
  text-align: center;
}
.outer {
  display: table;
  height: 100%;
  width: 100%;
}
.outer .inner {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

변형 중심 지정

HTML :

<div class="wrapper">
    <div class="centered">
        centered
    </div>
</div>

CSS :

.wrapper {
  position: relative;
  height: 600px;
}
.centered {
  position: absolute;
  z-index: 999;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

Flexbox로 중심 맞춤

HTML :

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

CSS :

.container {
  height: 500px;
  width: 500px;
  display: flex;              // Use Flexbox
  align-items: center;        // This centers children vertically in the parent.
  justify-content: center;    // This centers children horizontally.
  background: white;
}

.child {
  width: 100px;              
  height: 100px;
  background: blue;
}

선 높이로 텍스트 가운데 맞추기

HTML :

<div class="container">
    <span>vertically centered</span>
</div>

CSS :

.container{
    height: 50px;           /* set height */
    line-height: 50px;      /* set line-height equal to the height */
    vertical-align: middle; /* works without this rule, but it is good having it explicitly set */ 
}

참고 : 이 메서드는 텍스트 의 한 줄을 세로로 가운데에 맞 춥니 다 . 블록 요소를 올바르게 가운데에 배치하지 않으며 텍스트가 새 줄로 나뉘면 2 줄의 매우 긴 텍스트 줄을 사용하게됩니다.

직위 중심 : 절대

HTML :

<div class="wrapper">
  <img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>

CSS :

.wrapper{
   position:relative;
   height: 600px;
}
.wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

다른 이미지를 가운데에 배치하려면 해당 요소에 높이와 너비를 지정해야합니다.

HTML :

<div class="wrapper">
  <div class="child">
     make me center
  </div>
</div>

CSS :

.wrapper{
   position:relative;
   height: 600px;
}
.wrapper .child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 200px;
  height: 30px;
  border: 1px solid #f00;
}

의사 요소를 중심으로 정렬

HTML :

<div class="wrapper">
  <div class="content"></div>
</div>

CSS :

.wrapper{
   min-height: 600px;
}

.wrapper:before{
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.content {
  display: inline-block;
  height: 80px;
  vertical-align: middle;
}

이 방법은 다양한 높이의 .content 가 .wrapper 안의 가운데에있는 경우에 가장 .wrapper . .content 의 높이가 .wrapper 의 min-height를 초과하면 .wrapper 의 높이가 확장되기를 .wrapper .