Html CSS 중앙 정렬

 

 

1. 가로정렬 : 내용을 <p> 같은 종결 블록 요소의 왼쪽, 중앙, 오른쪽, 양쪽에 정렬한다.

.align-left { text-align: left; } 
.align-center { text-align: center; } 
.align-right { text-align: right; } 
.align-justify { text-align: justify; }

2. 고정폭의 블럭 요소 중앙 정렬

body { 
  text-align: center; 
} 
p { 
  text-align: left;
  width: 200px; margin: 0 auto;   /*넓이는 원하는 만큼*/
}

3. 가변폭의 컨테츠를 중앙 정렬

.target { 
  display: table; 
  margin-left: auto; 
  margin-right: auto; 
}

4. 포지션이 absolute일때 중앙 정렬

.target { 
  position: absolute; 
  left: 50%; 
  transform: translateX(-50%); 
}

5. 포지션이 absolute일때 중앙 정렬(가로 / 세로중앙 정렬)

<style>
#mother { position:relative; } 
#target { position:absolute; } 
.first { width:200px; left:0; right:0; margin-left:auto; margin-right:auto; } /* 가로 정렬 */
.second { height:40px; top: 0; bottom:0; margin-top:auto; margin-bottom:auto; } /* 세로 정렬 */
</style>

<div id='mother'> 
  <p id="target" class="first second">정렬</p> 
</div> 

6. 세로 중앙 정렬

<style> 
#mother { display: table; } 
#target { display: table-cell; vertical-align: middle; } 
</style> 

<div id="mother"> 
  <div id="target"> 
     <div class="content">here</div> 
  </div> 
</div>

7. 세로 중앙 정렬 (float 속성을 이용하는 방법)

<style> 
  #float {float:left; height:50%; margin-bottom:-120px;} 
  #target {clear:both; height:240px; position:relative;} 
</style>
<div id="float"></div> 
<div id="target"> Here </div>