在平時(shí)編譯時(shí)會(huì)用到很多屬性，本文具體的來(lái)說(shuō)一下居中時(shí)候常用的方法。

使用display:flex;也能實(shí)現(xiàn)居中效果；

采用flex布局的元素，成為flex容器，他的所有子元素自動(dòng)成為容器成員,成為容器項(xiàng)目；

容器默認(rèn)存在2根軸：水平的主軸和垂直的交叉軸

其中主軸的對(duì)齊方式有（justify-content）:

flex-end 右對(duì)齊

Center ??居中

Space-between 兩端對(duì)齊，項(xiàng)目之間的間隔都相等

Space-around 每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等

交叉軸的對(duì)齊方式有(align-items)：

flex-end 下對(duì)齊

center ???居中

baseline ?元素位于容器基線上

實(shí)現(xiàn)居中效果：display:flex;

??????????????justify-content:center;

??????????????align:items:center;

在空白處加行css，讓這個(gè)div在頁(yè)面居中（上下左右都居中）

__________________________________________”>Hello 愛(ài)投資??！

第一次看到這個(gè)問(wèn)題的時(shí)候

我覺(jué)得這個(gè)問(wèn)題出的有問(wèn)題

你都沒(méi)給我父布局大小，讓我怎么讓它居中，

老師講完以后，還是懵了很久，

直到有一天問(wèn)了”大神”

大神給了我答案并詳細(xì)給我講解為什么這樣寫(xiě)就能讓div居中

即使沒(méi)給父布局大小

代碼及解析：

Position:flex;

首先為div設(shè)置定位屬性，屬性值為flex。

個(gè)人理解為，因?yàn)檫@個(gè)div一直居中，其位置是固定的。所以用了flex

Left：50%;

Top：50%;

然后為div設(shè)置定位以后的位置屬性：left：50%設(shè)置該div距離左邊有其父布局有50%的距離；top：50%設(shè)置該div距離上邊有其父布局有50%的距離。

Margin-left：-100px;

Margin-top:-100px;

Margin-left:-100px;該div的width為200px，為其設(shè)置margin-left：-100px；以后

該div左半部分在其父布局50%的區(qū)域

右半部分在其父布局右半部分顯示

如圖所示，該div就在其父布局上下，左右居中。

對(duì)于居中，因其出現(xiàn)的地方很多，我有很多不同的見(jiàn)解，就僅僅一個(gè)居中，但是卻擁有很多的用途；text-align，vertical-align諸如等等都能夠讓某一元素?fù)碛芯又械男Ч?/p>

我想對(duì)vertical-align說(shuō)一些自己的看法；vertical-align需要在行內(nèi)塊元素的前提下才能夠有作用，也就是需要給元素定義dispaly：inline-block；并且也是直接給元素本身而不是定義在其父元素上。

.box{width:100px;

height:100px;

border:1px solid #000;

}

.box p{display:inline-block;}

.box b{display:inline-block;}

法是否符合規(guī)劃

丹江口單方事故

只有對(duì)兩個(gè)行內(nèi)塊元素定義了vertical-align之后vertical-align才能出現(xiàn)效果

編輯：千鋒HTML5