Home > Developer > Web Develop
<!DOCTYPE HTML><HTMLLang= "en"><Head><title>Vertical centering with Equal Top and Bottom Padding</title><MetaCharSet= "Utf-8"><Metaname= "description"content="" /><styletype= "Text/css">#parent{background:#ccc;} /*Horizontal Centering*/#parent{width:400px;margin:20px Auto;}. Child{text-align:Center;background:#999;Color:#fff;}/*Vertical Centering*/#parent{padding:5% 0;}. Child{padding:1% 0;}Body{margin:0px Auto;Background-color:Beige;}</style></Head><Body><form><DivID= "Parent"><Divclass= "Child">User <inputtype= "text" /></Div><Divclass= "Child">Password <inputtype= "text" /></Div><Divclass= "Child"></Div><Divclass= "Child"style= "background: #ccc;"><inputtype= "Submit"value= "Login"style= "width:80px;" /></Div></Div></form><Scripttype= "Text/javascript">varP=document.getElementById ("Parent"); Resize_fn= function(e) {varZbody_height=Math.max (Document.documentElement.scrollHeight, document.documentElement.clientHeight);varZdiv_height=Math.max (P.scrollheight, p.clientheight);varZtop=(Zbody_height-zdiv_height)/ 2;p. Style.margintop=Ztop+ "px";};//var w = document.getelementsbyclassname ("child");varW=Document.queryselectorall (". Child"); for (varI= 0; I<W.length;i++) {varOi=W.item (i); Oi.style.background= "#ccc";}//P.style.background = "Beige";resize_fn ();d ocument.body.onresize=Resize_fn;</Script></Body></HTML>
Center vertically, horizontally centered HTML example
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
