Before according to NetEase front-end micro-professional courses, wrote a blog
Horizontal Center Scheme
Vertical centering Scheme
Horizontal Center and vertical centering scheme
In the end, the teacher summed up the "solution" put forward the idea
For example, the use of
Display:flex
Display:table
Display:inline-block
Display:table-cell
Vertical-align:middle
Justify-content:center
What are the attributes and values of such a property?
① must be very familiar with these features.
② then, the "problem" is decomposed. For example, at the beginning of the "Horizontal center", then the demand is "inside the element width is not necessarily, outside the element width is not necessarily", then we can split the demand, the problem split into two,
The first step is to implement the element width inside and follow the content.
Second step to achieve horizontal centering
The relationship between CSS features and requirements.
Arrangement of ideas of layout scheme