Effect:
Implementation Code 1:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <styletype= "Text/css">Body{margin:0;padding:0;}#div1{Margin-top:100px;Margin-left:150px;width:300px;Height:300px;Background-color:Red;position:relative; }#div2{width:120px;Height:120px;Background-color:Black;position:Absolute; /*(300-120)/2/300*/Top:30%; Left:30%; } </style></Head><Body> <DivID= "Div1"class= "ClassName"> <DivID= "Div2"class= "ClassName"> </Div> </Div></Body></HTML>
Implementation Code 2:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <styletype= "Text/css">Body{margin:0;padding:0;}#div1{Margin-top:100px;Margin-left:150px;width:300px;Height:300px;Background-color:Red; }#div2{width:120px;Height:120px;Background-color:Black; /*(300-120)/2/300=30%*/position:relative;Top:30%; Left:30%; } </style></Head><Body> <DivID= "Div1"class= "ClassName"> <DivID= "Div2"class= "ClassName"> </Div> </Div></Body></HTML>
Implementation Code 3:
How to implement the horizontal vertical centering of a fixed width-height DOM element
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
