<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8" /> <title></title> <styletype= "Text/css">#father{width:100%;Height:500px;background:lightcoral;Writing-mode:VERTICAL-LR; }#son{background:LightBlue;Height:200px;margin:Auto;width:200px; } </style> </Head> <Body><DivID= "Father"> <DivID= "Son"> </Div></Div> </Body></HTML>
Use Absolute,auto centering to set its parent class element to the relative property, and the child element as the absolute property
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8" /> <title></title> <styletype= "Text/css">#father{Height:500px;background:lightcoral;position:relative; }#son{background:LightBlue;position:Absolute;Top:0;Bottom:0; Left:0; Right:0;width:200px;Height:100px;margin:Auto; } </style> </Head> <Body><DivID= "Father"> <DivID= "Son"> </Div></Div> </Body></HTML>
"Writing-mode and Absolute,auto" center vertically
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
