css3 html5 js mobile web page layout issues (used on WeChat). Two questions_html/css_WEB-ITnose

1. How to make a div display in the middle of the screen.... This is the middle of the screen, not the middle of the page
Note:

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

The code above is all It’s just in the middle of the page...
I now have several folded uls, and each folded ul has a lot of content. If I open them all, I measured the height and it is 1820px;
But the height of the mobile phone, for example It says 500; if you press the above code, it is 910. It is not in the middle of the phone screen at all. What should I do about this?

2 How to create a mask layer on the page?
My idea is: a div with an absolute position, 100% length and width; a semi-transparent background, and then put the tag you want inside this div. . .
If you do this, when the div of this mask layer is shown, other divs will be covered by it, and the tags in other divs cannot be clicked or otherwise operated.
I tested it this way and found that one mobile phone is ok, and the other mobile phone can still be clicked on other divs. Doesn’t it mean that the core of mobile browsers is webkit? (The mobile phone is not very old, and the system is 4.0 The above is just a pixel that can be clicked is much lower)
Why is this? This side is the div of the mask layer

 <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>

Reply to the discussion (solution)

Try it with position: fixed;

1. Center relative to the screen. In fact, if you observe the application scenario, the centered content is smaller than the screen (this is an implicit condition)
top:50%; margin-top:-25% This is OK
But your content exceeds the screen size and you still have to center it? I think you can’t force the centering at this time. You should change the positioning

2. If it can penetrate the transparent layer, that’s IE. You can change the background to opaque (#fff) and see if it can penetrate. No

1. Center relative to the screen. In fact, if you observe the application scenario, the centered content is smaller than the screen (this is an implicit condition)
top:50%; margin-top:-25% This is OK
But if your content exceeds the screen size, do you still need to center it? I think you can’t force the centering at this time. You should change the positioning

2. If it can penetrate the transparent layer, that’s IE. You can change the background to opaque (#fff) and see if it can penetrate. No

It’s not IE, it’s the browser of the mobile phone... It’s so numb. I tried many of them and it worked fine. But with only one mobile phone, it doesn’t care whether you mask it or not. The elements below can be clicked, with a white opaque effect. I tried it, but it didn’t work. I was depressed

fixed is fine, but I don’t use fixed much, and I don’t know much about it

1. Center relative to the screen. In fact, if you observe the application scenario, the centered content is smaller than the screen (this is an implicit condition)
top:50%; margin-top:- 25% This is OK
But your content exceeds the screen size and you still have to center it? I think you can’t force centering at this time. You should change the positioning

2. If you can penetrate the transparent layer, that’s IE. You can change the background to opaque (#fff) and see if you can still penetrate it. No

It's not IE, it's the browser of the mobile phone... It's numb. I tried many of them and it worked fine. But with only one mobile phone, it doesn't care whether you mask it or not. The elements below can be clicked, with a white opaque effect. I tried it, but it didn’t work.. I was depressed

Share the mobile phone model
We can also pay attention to it when we meet in the future Next

1. Center relative to the screen. In fact, if you observe the application scenario, the centered content is smaller than the screen (this is an implicit condition)
top:50%;margin-top:-25% This is OK
But your content exceeds the screen size and you still have to center it? I think you can’t force the centering at this time. You should change the positioning

2. If it can penetrate the transparent layer, that’s IE. You can change the background to opaque (#fff) and see if it can penetrate. No

It’s not IE, it’s the browser of the mobile phone... It’s so numb. I tried many of them and it worked fine. But with only one mobile phone, it doesn’t care whether you mask it or not. The elements below can be clicked, with a white opaque effect. I tried it, but it didn’t work.. I was depressed

Share the mobile phone model
We can also pay attention to it when we meet in the future Next
The one I have is ZTE u930. . . Android 4.03... I am making a web app that is accessed through WeChat....

There is still a problem now... I will post it first