div를 가운데 정렬하고 상단/하단 위치를 지정합니까?

Question

div를 가운데에 놓고 싶지만 동시에 코드 내에서 top: 100px;과 같은 것을 사용할 수 있습니다. 이것이 가능한가? 내가 position: fixed;라고 말하면 상단/하단 스타일이 작동하지만 margin-left: auto과 margin-right: auto은 사용할 수 없습니다. 한 번에 두 기능을 모두 얻으려면 어떻게해야합니까? 감사!

Answer 1

무엇을 사용하고 있는지에 따라 가장 쉬운 방법은 고정 된 위치의 "보이지 않는"요소와 가운데에있는 내부 요소의 두 요소를 사용하는 것입니다. 이런 식으로 뭔가 :

http://jsfiddle.net/CCqUn/

<div> 
    <p>Test</p> 
</div> 

div { 
    position:fixed; 
    top:100px; 
    width:100%; 
    height:0; /* In case of z-index issues; this element should be "hidden" */ 
} 
div p { 
    width:200px; 
    margin:0 auto; 
    background:#CCC; 
} 

Answer 2

상단 좌표가 아닌 여백/패딩과 함께 포함 요소 (시간의 99 %는 div)를 사용하려는 유혹을 받게 될 것입니다.이 요소는 위치 및 크기가 다른 다른 요소와 비교하여 정확한 위치를 결정하는 경향이 있습니다 알려진다). 다음 체크 아웃 :

<div class="container"> 
    <div class="content"> 
     Some content in here..! 
    </div> 
</div> 

을 ... 다음 CSS :

.container 
{ 
    width: 100%; 
} 

.content 
{ 
    width: 200px; 
    background-color: ORANGE; 

    /* set it to the center of the container, plus move it down */ 
    /* using 100px for the top margin */ 
    margin: 100px auto 0px; 
} 

이것은, auto에 왼쪽과 오른쪽 여백을 설정 아래쪽 여백 0px을두고 위쪽 여백 100px을 만들 것입니다.

물론, 요소의 중앙 위치를 들면, 0px auto 여백 설정은 가장 좋은 것입니다,하지만 당신은 당신이 요소를하고자하는 정확한 좌표를 알고있는 경우 상대 컨테이너, 당신이 할 수있는에 위치 할 다음을 시도해보십시오 (CSS).

.container 
{ 
    width: 100%; 
    position: relative; 
} 

.content 
{ 
    width: 200px; 
    background-color: ORANGE; 

    /* exact coordinates, relative to the container (parent) */ 
    position: absolute; 
    top: 100px; 
    left: 100px; 
} 

희망이 있습니다.

Answer 3

http://jsfiddle.net/nb6zY/2/

그냥 '자동'으로, 작동 고정 요소의 여백을 설정. 모달을 만들 때 다음 기술을 자주 사용합니다.

div { 
    width:100px; 
    position:fixed; 
    top:100px; 
    left:50%; 
    margin-left:-50px; 
} 

이 옵션은 가운데에 맞출 div의 너비를 알고있는 경우에만 작동합니다. 트릭은 여백을 왼쪽으로 div 넓이의 음의 '절반'으로 설정합니다.