ブラウザのサイズを変更すると、画面中央にテキストが表示されます

Question

私は2つのdivを使って画面にオーバーレイを作成し、画面の中央に2番目にオーバーレイを作成します。

ページのサイズを変更すると、テキストが画面中央に残ります。私はいくつかのイベントでコンテナを表示して隠しています。

#container 
 
    { 
 
     background-color: rgba(0, 0, 0, 1); 
 
     display: none; 
 
     height: 100%; 
 
     width: 100%; 
 
     z-index: 999; 
 
     position: absolute;  
 
    } 
 
    #text 
 
    { 
 
     bottom: 0; 
 
     left: 0; 
 
     position: fixed; 
 
     right: 0; 
 
     text-align:center; 
 
     top: 50%; 
 
    }

<div id="container"> 
 
     <div id="text">some text here</div> 
 
    </div> 
 

 

Answer 1

これはあなたのお役に立てば幸いです。

jQuery(document).ready(function($) { 
 
    $("button").click(function(event) { 
 
    $("#container").show(); 
 
    }); 
 
});

#container{ 
 
    background-color: rgba(0, 0, 0, 1); 
 
    display: none; 
 
    height: 100%; 
 
    width: 100%; 
 
    z-index: 999; 
 
    position: absolute; 
 
} 
 
#text{ 
 
    left: 0; 
 
    position: fixed; 
 
    right: 0; 
 
    text-align:center; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="text">some text here</div> 
 
</div> 
 
<button>Show popup</button>

Answer 2

あなたは垂直整列目的のために探している場合。あなたのコードここdisplay: tableプロパティ

#container { 
 
    background-color: rgba(0, 0, 0, 1); 
 
    display: table; 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
} 
 

 
#text { 
 
    text-align: center; 
 
    color: #ffffff; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<div id="container"> 
 
    <div id="text">some text here</div> 
 
</div>

Answer 3

のために行く.. HTML：

<div id="container"> 
    <div id="text">some text here</div> 
</div> 

CSS

#container 
{ 
    background-color: rgba(0, 0, 0, 1); 
    display: none; 
    height: 100vh; 
    width: 100vw; 
    z-index: 999; 
    position: absolute;  
} 
#text 
{ 
    font:10px; 
    color:white; 
    bottom: 0; 
    left: 0; 
    position: fixed; 
    right: 0; 
    text-align:center; 
    top: 50%; 
} 

のjQuery：

01次いで'絶対' に

$("body").click(function(){ 
$("#container").css("display","block"); 
}); 

Answer 4

#text { 
 
    position: absolute; 
 
    display: inline; 
 
    left: 50%; 
 
    top:50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div id="container"> 
 
    <div id="text">some text here</div> 
 
</div>

セット位置とは、画面のDIVの中心を見つけるために50％に左とトップ。 （画面のdiv中心を垂直に見つけたくない場合は、上端を削除する：50％） divの左上隅がブラウザの中心になります。 画面の中心を正確に見つけるには、divのサイズを半分残して移動し、その高さの上半分に移動します。

Answer 5

display flexプロパティを使用します。

#container{ 
display:flex; 
align-items: center; 
height:100%; 
} 
#text{ 
width:100%; 
text-align:center; 
} 

ご希望の場合はお手数ですが、