중앙 집중식 DIV 바로 위에 DIV를 배치하는 것이 가장 좋습니다.

Question

화면 가운데에 바로 표시하고 싶은 이미지가 있습니다. 위의 짧은 텍스트를 갖고 싶습니다. 이미지 위에 가운데에 있고 싶습니다.

왼쪽 여백을 음수로 설정하면 "수동으로"처리 할 수 ​​있지만 더 좋은 방법은 있습니까?

또한 코드는 일반적으로 괜찮습니까?

HTML :

<div class="central"> 
<div class="msg">This Message needs to be in the center</div> 
<img src="image.gif" width="130" height="15" /> 
</div> 

CSS : 나는 당신이 이런 식으로 그것을 할 수 있다고 생각

<style> 
.central { 
    position: absolute; 
    top: 35%; 
    left: 50%; 
    margin-left: -(X/2)px; 
    margin-top: -(Y/2)px; 
} 
.msg { 
    text-align:center; 
    font-family:Arial; 
    font-size:14px; 
    color:#03C; 
    margin-bottom:10px; 
    margin-left:-70px; 
} 
</style> 

Answer 1

:

.msg { 
    text-align:center; 
    font-family:Arial; 
    font-size:14px; 
    color:#03C; 
} 

img { 
    display: block; 
    margin: 0 auto; 
} 

.central{ 
    margin-top: 50%; 
} 

Answer 2

이

HTML을 시도

<div class="central"> 
<div class="msg">This Message needs to be in the center</div> 
<img src="image.gif" /> 
</div> 

CSS

.central img{ 
    display:block; 
    width: 130px; 
    height:15px; 
    position:relative; 
    margin:0 auto; 
} 

Answer 3

이 시도 :

HTML :

<div class="central"> 
    <div class="msg">This Message needs to be in the center</div> 
    <img src="http://freedomdefined.org/upload/thumb/5/5c/Fd_sq_icon_sc.svg/64px-Fd_sq_icon_sc.svg.png" /> 
</div> 

CSS :

.central { 
    text-align:center; 
    margin-top:'x' px; //such that it is vertically in the middle 
} 

DEMO.

Answer 4

당신은 마진 - 하단으로 시도 할 수 있습니다 - 또한 50 % :

img { 
    display: block; 
    margin: 0 auto; 
} 

.central{ 
    margin-bottom: -50%; 
}