页面div居中布局的几种方法比较

开发工具与关键技术：DW css
作者：江金燕
撰写时间：2019、2、17

下面是我写网页时记录div在页面居中的方法并进行了一点效果对比
一、 第一种居中主要是通过设计多少像素来设计居中的
代码与效果图如下

看法：对于运用像素来设计元素居中达到的效果并不是很理想：首先我们要对像素值进行不断的调整，即使如此达到的效果也不完美 毕竟像素总有差异
二、 第二种主要是通过百分比来完成的 主要就是对上下左右设计百分比 这里主要运用上
代码与效果图如下

看法：大家可以看到我上外边距离设计了50% 可是效果却大到我想要居中的效果
三、第三种主要是运用flex布局弄的
代码与效果图如下

看法：大家可以看到对比前两个方法 第三种是唯一达到垂直和水平居中的完美效果：使用felx布局可以为页面格式布局提供具有更大的灵活性。

以上是三种居中的方法

知识扩展：flex容器与flex项目
Flex容器有六大属性 （常用的有）
一、 Flex—direction属性 包括四个值
二、 flex—wrap属性（少用）
三、 flex-flow 属性
四、 justify—content属性对齐方式 包括四个值 用处多点
1、 felx-start 左对齐
2、 flext-end 右对齐
3、 center居中对齐 （例如第三种方法）
4、 space-around 相隔间隔相等
五、 align-items 属性
1、center 交叉轴对齐（常用）
六、align-conter 属性

Flex项目的属性也有六种
一、 order 属性
二、 flex-grow属性
三、 flex-basis属性
四、 flex-basic 属性
五、 flex 属性（复合属性）
六、align-self属性

备注：flex容器与flex项目 在此只做此案例涉及的知识点解释，
具体更多容器的属性和项目详解如果有兴趣可登录下面的一个网址 我也是通过老师上课在那里学习的哈

希望对你居中布局有所帮助呀
网址： https://www.geek-share.com/detail/2750156481.html