css3 +html5+js モバイル Web ページのレイアウトの問題 (WeChat で使用) 2 つの問題_html/css_WEB-ITnose

1. 画面の中央に div 表示を作成する方法.... これはページの中央ではなく、画面の中央です
説明:

position:absolute;left:50%;top:50%;margin-top:-25%;margin-left:-25%(或者margin个具体的像素值的负数)//又如下面的:  var h = document.body.clientHeight; $("#update_info").css({ 'top': h/2 });

 <div id="update" style="display:none;background:rgba(0,0,0,0.5); position:absolute; width:100%; top:0; left:0;width:100%;height:100% ">  <div id="update_info" style="width:80%; height:140px; background-color:White; text-align:center; position:absolute;left:10%;top:50%;margin-top:-75px;"> <div style="width:80%; margin-left:auto; margin-right:auto; margin-top:25px; margin-bottom:0px; text-align:left;">  <input id="txtValue" type="text"/>  <asp:DropDownList ID="ddlNational" runat="server" style=" display:none; width:100%;">  </asp:DropDownList>  </div>  <div style="width:80%; margin-left:auto; margin-right:auto; margin-top:25px; padding:0px;">  <a href="javascript::" class="button"  onclick="updateInfo()">修改</a>   <a href="#" class="button"  onclick="close_dlg();">取消</a>   </div>  </div>        </div>

ディスカッションへの返信 (解決策)

1. 画面に対して中央に配置します 実際に、アプリケーションのシーンを観察すると、 、中央のコンテンツが画面より小さい (これは暗黙の条件です)

しかし、コンテンツが画面サイズを超えている場合でも、中央に配置する必要がありますか?それ？現時点では強制的にセンタリングを行うことはできないと思います。位置を変更する必要があります

2. 透明なレイヤーを透過できる場合は、背景を不透明 (#fff) に変更して、透過できるかどうかを確認します。

margin-top:-25 % これで問題ありません

ただし、コンテンツが画面サイズを超えています。それでも中央に配置しますか?現時点では強制的にセンタリングを行うことはできないと思います。位置を変更する必要があります

2. 透明なレイヤーを透過できる場合は、背景を不透明 (#fff) に変更して、透過できるかどうかを確認します。

1. 画面に対して中央揃え 実際、アプリケーション シナリオを観察すると、コンテンツは画面よりも小さくなります (これは暗黙の条件です)

top:50%; -25% これは問題ありません

しかし、コンテンツが画面サイズを超えている場合でも、中央に配置する必要がありますか?現時点では、強制的にセンタリングを行うことはできないと思います。位置を変更する必要があります

2. 透明なレイヤーを透過できる場合は、背景を不透明 (#fff) に変更して、透過できるかどうかを確認できます。


それは IE ではなく、携帯電話のブラウザです... いくつか試してみましたが、問題なく動作しました。下の要素をクリックできます。不透明効果を試しましたが、うまくいきませんでした。

1. 画面を基準にして中央に配置します 実際にアプリケーションのシナリオを観察します 中央に配置されたコンテンツは画面よりも小さいです (これは暗黙の条件です)

top:50%; margin-top:-25% これは OK です

しかし、コンテンツが画面サイズを超えている場合でも、コンテンツを中央に配置する必要がありますか?現時点では強制的にセンタリングを行うことはできないと思います。位置を変更する必要があります

2. 透明なレイヤーを透過できる場合は、背景を不透明 (#fff) に変更して、透過できるかどうかを確認します。


それは IE ではなく、携帯電話のブラウザです... いくつか試してみましたが、問題なく動作しました。下の要素をクリックできます。不透明効果を試しましたが、うまくいきませんでした。