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

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

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

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

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

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

以上是三种居中的方法

知识扩展：flex容器与flex项目
Flex容器有六大属性 （常用的有）
一、 Flex—direction属性 包括四个值
二、 flex—wrap属性（少用）