CSS常见布局（7） | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天

前言

闲言少叙，让我们直接奔入主题。

常用的 CSS 布局

在介绍了 CSS 的布局方式之后，我们来看一下常用的 CSS 布局有哪些呢？

水平垂直居中（感觉总结的并不是很好）

感觉垂直居中真的是已经被讲烂了，但是在平时做项目时，我都是靠试的，导致面试的时候被问到有时候回答不上来，现在就用自己的方式来总结一下。其实这个方式是有很多的，但就是看的教程太多了，导致最后一个都没有记住，**所以我决定尽可能的将情况考虑完整，然后每一种情况只记住一个最佳实践。**

对于居中，我个人认为不需要背什么“x 种方式实现 xx”这样的例子，我们只需要了解其原理即可写出符合要求的 css。

水平、垂直居中，个人比较喜欢用绝对定位的方法实现，其次就是使用 table 布局，因为自带垂直居中。如果是单行的行内元素使用 line-height 等于 height，对于多行元素的垂直居中，大部分都是使用 table 元素（求推荐更好的布局），当然还有 flex 和 grid 布局。

水平居中

固定宽度

这种方式是绝对定位居中，除了使用 margin，我们还可以使用 transform（注意浏览器兼容性，只适用于 ie9+，移动开发请忽略） 或者使用 magin:0 auto；但一般情况下我都会使用上一种，因为习惯了(ಥ_ಥ)。

宽度未知

将子元素设置为行内元素，然后父元素设置 text-align: center。

多个块状元素

上面的方式即使子元素不止一个也想实现水平居中也是有效的，（宽度固定不固定都可，不固定的话就不需要设置宽度，会被自动撑开，但是要考虑到撑爆的情况）

 <h5>今天先到这儿了，拜拜