下面是我寫網頁時記錄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屬性
希望對你居中布局有所幫助呀
**：
DIV居中的幾種方法
1.1 body 缺點 body內所有內容一併居中 2.center 缺點 需要設定position屬性，網頁複雜時容易擾亂頁面布局,而且只是元素的起始位置居中 3.1 center 缺點 需要設定div寬度 4.1 center 缺點 需要支援html5 5.1 center 缺點 需要支援htm...
div盒子水平垂直居中的幾種方法
一 盒子沒有固定的寬和高 方案1 使用transforms屬性的translate平移 這是最簡單的方法，不僅能實現絕對居中同樣的效果，也支援聯合可變高度方式使用。我不知道我的高度和寬度是多少。transform translate 50 50 分別向左向上移動自身長寬的50 使其位於中心。二 盒子...
讓div水平垂直居中的幾種方法
最近，公司招了一批新人，吃飯的時候恰好碰到乙個新同事，就跟他聊了起來。聽他說了主管面試的時候出的一些問題，其中乙個問題我印象特別深刻，因為，我當年進來的時候，也被問到這個問題。雖然這個問題已經問爛了，但是我還是有必要在這裡總結乙個這個問題。利用 css 來實現物件的垂直居中有許多不同的方法，比較難的...