CSS box model to achieve the middle level
FIG horizontal centering effect is as follows:
HTML：
CSS Global Styles:
Method a: using margin: 0 auto; (applies only to the sub-box has a wide time)
Method two: text-align + display (or sub-box has no width when applicable)
Method three: position positioning (only for the sub-box has a height and width of the time)
Method four: + position Transform (with or without sub-boxes are applicable when the width and height)
Method five: flex layout (layout elasticity) (when sub-boxes with or without the width and height are applicable)
CSS box model to achieve vertical center
FIG vertical centering effect is as follows
HTML and CSS global style above.
Method a: position is positioned (for the sub-box has a height and width of the time)
Method two: position + transform (or sub-box has no time width and height are applicable)
Method three: flex layout (with or without sub-boxes are applicable when the width and height)
CSS box model to achieve horizontal and vertical center
Horizontal and vertical centering effect as FIG.
HTML and CSS global style Ibid
Method a: position is positioned (for the sub-box has a height and width of the time)
Method two: + position Transform (with or without sub-boxes are applicable when the width and height)
Method three: flex layout (with or without sub-boxes are applicable when the width and height)
