1, also learned a horizontal vertical center method. Applies to cases where the parent element has only one child element, such as a full-screen effect.
Parent element: Pos-r, W, H set; (Emmet code, same as below)
Child elements: Pos-a,w, h settings, t0 b0 l0 r0, m-a.
Previously only know margin:0 auto and so on, never thought of the magical margin:auto ... Ignorant ...
<!DOCTYPE HTML><HTMLLang= "ZH-CN"><Head> <MetaCharSet= "Utf-8"> <title>Document</title> <style>. Outer{position:relative;width:300px;Height:300px;Background-color:#f80;margin:50px Auto; }. Inner{position:Absolute;Height:100px;width:60%;Top:0;Bottom:0; Left:0; Right:0;Background-color:#fff;margin:Auto; } </style></Head><Body> <Divclass= "outer"> <Divclass= "inner">Lorem ipsum dolor sit amet.</Div> </Div></Body></HTML>
The effect is as follows:
April 29, 2015 study notes
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
