Home > Developer > Web Develop
Example:
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>CSS implements a child layer horizontally vertically centered in the parent layer</title><styletype= "Text/css">#parent{position:Absolute;Top:50%; Left:50%;margin:-250px 0 0-200px;Height:500px;width:400px;Background-color:Red;}#child{position:Absolute;Top:50%; Left:50%;margin:-100px 0 0-150px;Height:200px;width:300px;Background-color:Green;}</style></Head><Body><DivID= "Parent"> <DivID= "Child"></Div></Div></Body></HTML>
Explain:
The parent layer of the layer with the ID parent is the parent of the layer that is body,id as child.
Points to note:
One: The child layer must be set position to absolute, and the parent layer must be set position to Relative;absolute as the parent of another absolute.
Two: Sub-layer top is set to 50%,left also set to 50%.
Three: The margin-top of the child layer is set to half the height of itself, and is negative; the margin-left is set to half the width of itself and is negative.
Effect:
The child layer is vertically centered horizontally on the parent layer.
CSS implements a child layer horizontally vertically centered in the parent layer
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
