css布局

一、左右布局

1. 使用浮动来布局
   思路： 两个div子元素，让其中的一个元素float: left;另一个元素就会在右边了自然就左右布局了。不要忘了在父级元素加上clearfix。

例子如下： 浮动布局

2. 使用flex 布局
   思路： 直接在父级元素上加display: flex;即可

例子如下 ：使用 flex 布局

二、左中右布局

1. 使用浮动来布局
   思路： 两个div子元素，让其中的一个元素float: left;另一个元素float: right;就会在右边了，中间元素不管。自然就左中右布局了。不要忘了在父级元素加上clearfix。

例子如下： 浮动布局

2. 使用flex 布局
   思路： 照例在父级元素上display: flex;，则此时已经是左中右布局了

例子如下：flex 布局

三、水平居中

1. 内联元素
   在父级元素上写text-align:center;
2. 块级元素
   在该元素上写

margin-left: auto;
margin-right: auto;

或者直接写：margin: 0 auto;

四、垂直居中

1. Margin-top: -50%和margin-rigth: -50%
   思路： 让父级元素position: relative;，子元素position: absolute;，然后top，left 50%，再移动自身宽度高度的一半即可

例子如下： Margin-top: -50%和margin-rigth: -50%

2. 上面版本的升级版：用了translate -50%

例子如下： translate -50%

3. margin auto
   例子如下：margin auto

4. flex（最简单！！！）
   例子如下： flex