중앙 플로팅 확인 대화 상자에 대한 CSS를 설계하는 방법은 무엇입니까?

Question

나는 항상 페이지를 중심으로하고 페이지 위에 떠 다니는 확인 대화 상자를 표시하는 방법을 찾고 있습니다.

그것을 시도했지만 위치가 고정되어 있기 때문에 항상 '항상 중앙'이 아닙니다.

.Popup
{
    text-align:center;
    position: absolute;
    bottom: 10%;
    left: 27%;
    z-index:50;
    width: 400px;
    background-color: #FFF6BD;
    border:2px solid black;
}

아이디어가 있습니까? 감사

Answer 1

이것을 사용해보십시오 CSS

#centerpoint {
    top: 50%;
    left: 50%;
    position: absolute;
}

#dialog {
    position: relative;

    width: 600px;
    margin-left: -300px;

    height: 400px;
    margin-top: -200px;
}

<div id="centerpoint">
    <div id="dialog"></div>
</div>

#CenterPoint 대화 상자의 컨테이너 디스크 여야합니다

메모 그 #CenterPoint div는 내부에 있어야합니다 신체 요소 또는 내부 요소 없습니다 위치 : 상대; 재산

Answer 2

@toma의 답변과 비교하여 하나의 요소에서 할 수 있습니다.

#theDiv {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    height: 50px;
    margin-top: -25px;
    background: yellow;
}

<div id="theDiv" />

이를 통해 부모 컨테이너 및 그에 관계없이 페이지에 어디에나 배치 할 수 있습니다. position 속성.

Answer 3

CSS3 변환은 하드 코딩 너비와 여백을 피하는 데 사용될 수 있습니다.

.dialog {
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

예제 사용 : http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/

Answer 4

.Popup
{
width:400px;
margin-left:auto;
margin-right:auto;
}

그것은 수평 정렬입니다. 수직 정렬은 조금 까다 롭습니다. "CSS 수직 센터"등을위한 Google 주변.