CSS Layout Center aligned, left fixed width right Adaptive detailed introduction

 CSS page layout is the most basic skill of web front-end development, this article will introduce some common layout methods, including box layout, column layout, flex layout and so on. In this article, you can see some methods for horizontal vertical centering, fixed width on the left, and adaptive on the right. If you have more about the layout of the skills, welcome message exchange. First, the magic of the center often see some of the questions asked how to achieve horizontal vertical center, but also require a variety of methods. Alas, alas! Here's how I know to implement centering. (1) the parent element relative; the child element absolute,top:50%;left:50%;margin-left:-its own half of the width; margin-right:-his own height. 

<! DOCTYPE html>
This method needs to know the height of the child element. 

(2) parent element: relative; child element: Absolute;top:50%;left:50%;transform:translate ( -50%,-50%);
<! DOCTYPE html>
This method is similar to the above, but the use of transform, the advantage is not need to know the height of the child elements, compatibility, I checked a bit, look at it.

(3) parent element: Display:flex;justify-content:center;align-items:center;
<! DOCTYPE html>
This method looks a little bit taller, regardless of the child element.

(4) Horizontal centering method, parent element: Text-align:center
<! DOCTYPE html>
If the text in the child element is not centered horizontally, then this method will be a lot of trouble. (5) Horizontal Center method, sub-element: margin:0 auto; This is a good thing to say, not on the code, so much for centering, if you have a better way, please let me know.
second, left fixed width, right adaptive This is a more common requirement, the following describes several implementation methods. (1) Left fixed width, left floating, right not specified width.
<! DOCTYPE html>
This method was not accidentally found in the experiment.

(2) method of occupying seats with padding

<! DOCTYPE html>
Note that absolute is out of the document flow: 100% of right is relative to the content width of the parent container, not the entire width.

(3) Father: Display:flex; Zodinquan; right flex:1. Ok

<! DOCTYPE html>
The elastic box is very strong, there are wood. But some are to add the prefix, which to add their own check, one time to do experiments, the computer style is correct, the cell phone is wrong, engaged in long time.
(4) Father: display:table: Display:table-cell; Left: fixed width.
<! DOCTYPE html>
It is said that this is an ancient method, I do not know it? Maybe I'm younger!