중심잡다 뒈질것 같아서.

아니 모 absolute 으로 하나하나 잡으면 뒈쟈나? 뒈지고싶나

CSS2 센터링

인라인 텍스트 수평 센터링

P { text-align: center }
H2 { text-align: center }

블록 텍스트, 이미지 수평 센터링

블록을 가운데에 두려면 margin:auto 쓰면 편한데 그럼 너비를 정해줘야…

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 8em
}

이미지도 마찬가지.

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto 
}

블록이나 이미지 수직 센터링

CSS level 2 doesn’t have a property for centering things vertically.

딱 맞는 스펙은 없지만 table-cell의 스펙에 버티컬 센터링이 있기 때문에 빌려다 쓴다.

<DIV class="container">
  <P>This small paragraph... <!-- 이것을 수직 센터링 하기 위해 -->
</DIV> <!-- 바깥에 block element 를 하나 둔 다음 -->

DIV.container {
    min-height: 10em;
    display: table-cell; <!-- 그것을 테이블쎌이라고 하는 짓을 하면 된다. -->
    vertical-align: middle 
}

CSS3 센터링

수직 센터링

<div class=container>
  <p>This paragraph…
</div>

이거 가지고.

transform

div.container {
   height: 10em;
   position: relative /* 부모는 렐러티브 ~ */
}              
div.container p {
   margin: 0; /* 이건 원래 p의 마진 없애려고 */
   position: absolute; /* 나는 앱솔루트 ~ */
   top: 50%; /* 부모 높이 반틈에 시작점 맞추고 */                         
   transform: translate(0, -50%) /* 내 높이의 반틈만 -y */
}   /* 4 */

flex

div.container {
  height: 10em;
  display: flex;
  align-items: center /* 수평 정렬 */
}
div.container p {
  margin: 0 
}

수직 수평 센터링 한번에

<div class=container4>
  <p>Centered!
</div>

이거 가지고.

transform

div.container4 {
    height: 10em;
    position: relative 
}
div.container4 p {
    margin: 0;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%; /* 부모 너미 반틈에 시작점 맞추고 */
    transform: translate(-50%, -50%) /* 내 높이의 반틈만 -x, -y */
}

flex

div.container6 {
  height: 10em;
  display: flex;
  align-items: center;
  justify-content: center /* 수직 정렬 */
}
div.container6 p {
  margin: 0 
}

뷰포트 센터링

<html>
    <style>
        body {
            background: white 
        }
        section {
            background: black;
            color: white;
            border-radius: 1em;
            padding: 1em;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) 
        }
    </style>
    <section>
        <h1>Nicely centered</h1>
        <p>This text block is vertically centered.
        <p>Horizontally, too, if the window is wide enough.
    </section>
  • left 땡겨주는 것들 때문에 margin-right:-50% 줘야한다는 얘기는 별 차이를 모르겠어서 빼버림
  • 확인하고 싶으면 원문으로.