CSS 중앙정렬

text-align

inline 요소만 가능 block 요소는 불가능

width 값이 지정된 block요소의 중앙 정렬

auto 값은 요소 안의 마진 여백이 대등하게 나눠짐을 의미합니다.

1
2
3
4
p { 
	width: 100px; /* 정렬하려는 요소의 넓이를 반드시 지정 */ 
	margin: 0 auto; 
}
1
2
3
4
<div class="popup">
    POPUP
</div>
<div class="dim"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.popup {
  position: fixed;
  bottom: 25%;
  left: 0;
  right: 0;
  margin: 0px 24px;
}
  
.dim {
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:#000000;
  opacity:0.7;
  z-index:1001;
  
  overflow:hidden;
  position:fixed; 
}
1
window.document.body.style.position = 'fixed'

absoulte

1
2
3
4
5
6
7
8
#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; // Need a specific value to work 
}

absoulte 중앙 정렬 , 양옆 여백

1
2
3
4
5
6
7
8
<div class="imageDiv">
    <img src="https://static.tmaptaxi.com/promotion/tmembership/mobile/tmapapp.svg" width="100%">
    <div class="btn" onclick="download()">
        <div style="padding: 0 38px;">
            <img src="https://static.tmaptaxi.com/promotion/tmembership/mobile/btn_copy_2.svg" width="100%">
        </div>
    </div>
</div>
1
2
3
.wrap_EventArea .imageDiv{position:relative;}
.wrap_EventArea img{display:block;width:100%;border:none;vertical-align:top;}
.wrap_EventArea .btn{display:block;position: absolute;bottom: -10px;width: 100%;}

References