5. Center in full screen and center in full screen
There are two ways to center block elements in full screen mode:
1. When the width and height of block elements are known:
. Css {position: absolute; height: block height; width: block width; top: 50%; margin-top:-block height/2; left: 50%; margin-left: -Block width/2 ;}
The following example shows that the picture of a dog is centered on the top, bottom, and left of the dog:
<body class="Site"> <div class="Media"> </div></body>
|
body{ background: rebeccapurple; } .Media{ height: 100px; width: 180px; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -90px; } .Media img{ width: 100%; }
|
2. If you do not know the width and height of an element:
You can also use transform to change the Media class to the following.
.Media { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0);}
3. Block center knowledge a). Use margin: 0 auto (position: relative and do not locate) to center. The position cannot be absolute during positioning. Cause: the margin: 0 auto attribute cannot be used because it has been absolutely located. Position: absolute; how to center a block?
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
