导图 1.水平居中 1.1 行内元素：文本水平居中,给父级元素设定 text-align:center html css 1.2 块级元素,width 确定 块级元素,width 确定，使用 marg

前端布局不管是在面试过程中还是在工作中都是非常重要的一部分，一个优秀的前端工程师可以在很快的时间内写出同一种布局的多种实现方案，练习并掌握CSS布局方案可以提高我们的页面开发速度。

页面布局中最常见的需求就是元素或者文字居中了，但是根据场景的不同，居中也有简单到复杂各种不同的实现方式，本篇就带大家一起了解下，各种场景下，该如何使用 CSS 实现居中

我们大家在初学css布局html页面结构的时候，肯定会经常使用到“margin”外边距这个属性，这个属性对我们的页面布局十分有用，也十分方便，但是这个属性在使用的时候经常会出现一些奇特的现象

认识Flex布局（什么是Flex Container、Flex Item）、主轴&交叉轴、Flex Container与Flex Item相关属性、Flex布局案例、Flex布局常见问题及解决方案

当父元素没有写死高度时，子元素垂直居中是比较容易实现的，给父元素上下 padding 即可。如： 点我查看 demo 不写死宽度和高度是比较好的习惯，建议尽量不要写死 width 和 height。

css实现盒子的垂直居中显示 body内容区 方法一：利用定位（常用） 方法二：利用margin：auto 方法三：利用display：table-cell 方法四：利用flex布局（常用） 方法五：

前情提要 定宽高和不定宽高指的是子元素的宽高，也就是dom元素中class为box的div 必备知识点 相对定位：是相对自己而言进行位置的移动。不会脱离文档流，原先的位置会空

在布局中，我们经常会遇到关于 元素对齐 的情况，解决方案也有多种，本篇文章主要讲解居中的各种对齐方式的解决方案。