css布局

最近在学习css相关的知识，本文主要总结一些css布局相关的知识。

一、左右布局和左中右布局

左右布局和左中右布局都属于横向布局，横向布局的主要方法是float+clearfix

就是给子元素都加上float:left，然后给父元素加上clearfix

```

//css部分

.clearfix::after{

    content:'';

    display:block;

    clear:both;

}

//html部分

左

左

左

```

二、水平居中

css的居中问题可以在https://css-tricks.com/centering-css-complete-guide/中有总结(Horizontally)。

1,如果是inline 和 inline- 的元素，直接text:align:center就可以了

例如inline, inline-block, inline-table, inline-flex等元素都可以用这中方法水平居中

2，如果是一个块级元素（block），可以设置左右margin都为auto来实现水平居中

三、垂直居中

css的居中问题可以在https://css-tricks.com/centering-css-complete-guide/中有总结(vertically)。

1,如果是inline 和 inline- 的元素

1.1如果内容是单行

a)可以通过计算出相等的上下padding设置垂直居中

b)可以通过设置height和line-height相等让内容垂直居中

1.2如果内容是多行

a)因为table中的元素默认是垂直居中的，所以可以设置元素类似于table

父元素：display：table子元素display:table-cell; vertical-align:middle;

b)也可以用flex实现，

父元素.flex-center-vertically { display: flex; justify-content: center; flex-direction: column; height: 400px;}

那么子元素就会垂直居中了

2，如果是块级元素（block）

2.1知道元素的高度

如果知道元素的高度，设置父元素相对定位，子元素绝对定位，top: 50%; margin-top为子元素一半高度的负值。

center-1.png

2.2不知道元素的高度

如果不知道元素的高度，设置父元素相对定位，子元素绝对定位，top: 50%; transform: translateY(-50%);

center-2.png

2.3可以使用flex

如果可以使用flex就很可以直接在父元素设置display: flex; flex-direction: column; justify-content: center;

center-3.png