如何使用css讓img垂直居中（flex方法）？

在css中，我們可以使用flex去實(shí)現(xiàn)垂直居中，但是flex并不是一個(gè)很好的方法，現(xiàn)在很多瀏覽器并不支持flex，例如IE8,9。

創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)新豐,十多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

首先我們要先給圖片添加一個(gè)div，并且定義為寬度為100px，高度也是100px，并且給它定義一些基本的屬性，其中我們把div中的display元素設(shè)置成flex，然后把另外一條添加align-items:center屬性。

css代碼：

body{background:#999}

.flexbox{width:300px;height:250px;background:#fff;display:flex;align-items:center}

.flexboximg{width:100px;height:100px;align-items:center;}

如果情況容許的話，可以用以下方法，兼容性更好：

body{background:#ccc;}

.posdiv{width:300px;height:250px;background:#fff;position:relative;margin:0auto}

.posdivimg{width:100px;position:absolute;top:50%;margin-top:-50px;}

css基礎(chǔ)之flex布局

很多時(shí)候跟著書和不系統(tǒng)的視頻學(xué)習(xí)，會(huì)發(fā)現(xiàn)沒有方向，學(xué)了很多卻不知道自己能夠做出什么成績(jī)。

學(xué)習(xí)要有一個(gè)清晰的職業(yè)學(xué)習(xí)規(guī)劃，學(xué)習(xí)過程中會(huì)遇到很多問題，你可以到我們的web學(xué)習(xí)交流君羊- 點(diǎn)擊此處 ，

同時(shí)準(zhǔn)備了基礎(chǔ)，進(jìn)階學(xué)習(xí)資料。學(xué)友都會(huì)在里面交流，分享一些學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，每天也會(huì)準(zhǔn)時(shí)講一些項(xiàng)目實(shí)戰(zhàn)案例。

————————————————

1.什么是flex

flex 是 Flexible Box 的縮寫,意為 彈性布局

flex布局中把一個(gè)元素作為容器，容器中的子元素稱為項(xiàng)目

可以通過容器的flex屬性，設(shè)置所有項(xiàng)目的排列樣式。也可以通過項(xiàng)目的flex屬性，設(shè)置指定項(xiàng)目的排列樣式。

2.flex布局的方向

flex布局項(xiàng)目的排列方向可以有兩個(gè)維度，一水平，二垂直

項(xiàng)目排列方向稱為主軸，與主軸垂直的方向叫交叉軸

在每個(gè)軸上有兩個(gè)方向，從左至右，從右到左；從上到下，從下到上。

2.1 flex水平布局

在水平維度，默認(rèn)方向是從左至右

可以通過?flex-direction：row-reverse設(shè)置為從右到左排列

效果圖：

1).默認(rèn)方向,從左至右

2).反方向

2.2 垂直布局

效果圖：

1).默認(rèn)方向，從上到下

2).反方向

3. 容器內(nèi)項(xiàng)目換行

通過flex-wrap屬性，設(shè)置項(xiàng)目在容器內(nèi)是否可以換行，默認(rèn)不允許換行。

不換行的稱為單行容器，換行的稱為多行容器

也可以通過flex-flow屬性同時(shí)設(shè)置容器主軸方向和是否換行（推薦使用）

效果圖：

1).默認(rèn)不允許換行，項(xiàng)目被壓縮

2).允許換行，當(dāng)剩余寬度不足容納一個(gè)項(xiàng)目塊時(shí)，就換行

相關(guān)知識(shí)：

css如何實(shí)現(xiàn)邊框長(zhǎng)度控制功能

詳細(xì)介紹css中的數(shù)學(xué)表達(dá)式calc()

關(guān)于書籍：需要學(xué)習(xí)資料的小伙伴們可以加群， 點(diǎn)擊此處

CSS: Flex 彈性布局

彈性元素是 container直接的在文檔流中的子元素

container在文檔流中的子元素才是彈性子元素

彈性元素的默認(rèn)寬高為內(nèi)容寬高

flex-direction: row|row-reverse|column|column-reverse

container內(nèi)的排列順序: 從左往右 從右往左 從上往下 從小往上(都是從container對(duì)應(yīng)方向邊緣開始)

flex-wrap: nowrap|wrap|wrap-reverse

order: integer

initial: 0

兩個(gè)黃色元素沒有設(shè)置order, 默認(rèn)為0

flex-basis: height|width

設(shè)置的是寬還是高根據(jù)主軸來定, 如果主軸是行則設(shè)置默認(rèn)寬度, 如果主軸是列則設(shè)置默認(rèn)高度

flex-grow: integer

initial: 0

彈性元素的寬或高計(jì)算:

flex-basis + flow-grow/sum(flow-grow)*remain

flex-shrink: integer

initial: 1

彈性元素的寬或高計(jì)算:

flex-basis + flow-shrink/sum(flow-shrink)*remain

這里的remain是負(fù)值, 表示超出的內(nèi)容大小

flex: flex-grow || flex-shrink || flex-basis

initial: 0 1 main-size ( main-size 元素沿主軸方向默認(rèn)尺寸)

justify-content: flex-start | flex-end | center | space-between | space-around

效果依次如下:

align-items: flex-start | flex-end | center | stretch | baseline

align-self: auto | flex-start | flex-end | center | baseline | stretch

initial: auto

當(dāng)多行時(shí): 應(yīng)用于行

align-content: flex-start | flex-end | center | space-between | space-around | stretch

CSS flex布局

flex布局是一種無論對(duì)于塊級(jí)元素還是行內(nèi)元素都可以被采用的布局，且它使用起來也是十分的方便

首先是要指定flex布局

當(dāng)我們指定flex布局方式的時(shí)候，其屬性值 float、clear、vertical-align就失效了

無論是塊級(jí)元素還是行內(nèi)元素，當(dāng)他們指定使用flex布局的時(shí)候，就被稱為“ 容器 ”（flex container）

他們的子元素自動(dòng)成為容器成員，被稱為“ 項(xiàng)目 ”（flex item）。

flex布局是通過兩根軸決定的，其實(shí)現(xiàn)方式其實(shí)和直角坐標(biāo)系很像，都是通過軸來進(jìn)行定位

每個(gè)容器都有兩根軸，分別為水平的 主軸 （main axis）和垂直的 交叉軸 （cross axis）。主軸開始位置為main start，結(jié)束位置為main end。交叉軸的開始位置為cross start，結(jié)束位置為cross end

容器內(nèi)的項(xiàng)目都是沿著主軸排列的，這點(diǎn)和塊級(jí)元素有較大的不同，因?yàn)槊總€(gè)塊級(jí)元素默認(rèn)是占有一整行的，且排列方式為由上到下排列。

每個(gè)項(xiàng)目都占有一定的主軸空間和交叉軸空間，分別被稱為main size和cross size

flex布局下，容器和項(xiàng)目都有其各自的屬性

決定主軸的方向，即決定項(xiàng)目的排列方向，其屬性值有

決定了當(dāng)一行放不下所有的項(xiàng)目時(shí)，其換行與否以及換行方式

定義了項(xiàng)目在主軸上的對(duì)齊方式，假設(shè)主軸是從左向右的水平排列

定義了項(xiàng)目在交叉軸上的對(duì)齊方式，假設(shè)交叉軸是從上到下排列

在這里重點(diǎn)說一下上面這兩個(gè)屬性。

這樣可以很方便的設(shè)置水平垂直居中

另外說一下align-items：baseline這個(gè)屬性值。如描述，這個(gè)屬性值是通過文字來進(jìn)行對(duì)齊，而不是每個(gè)項(xiàng)目的邊界或是中心

在容器內(nèi)具有多根主軸線時(shí)，可以定義這些軸線的對(duì)齊方式

align-content屬性和justify-content屬性，這兩者的屬性值有較大的相似之處，這是因?yàn)椋琷ustify-content屬性定義的是多個(gè)項(xiàng)目在主軸上的對(duì)齊方式，而align-content屬性定義的是多根主軸在交叉軸上的對(duì)齊方式，這兩者描述的對(duì)象就幾乎一致

定義了多個(gè)項(xiàng)目的排列順序，其使用方式和z-index屬性值有異曲同工之處，都是指定屬性值，屬性值為整數(shù)。對(duì)于order屬性，屬性值越小，則排列越靠前；對(duì)于z-index屬性，則屬性值越小，就越在底層

設(shè)置了項(xiàng)目的放大比例，其默認(rèn)值為1。

設(shè)置了項(xiàng)目的縮小比例，默認(rèn)值為1。

在分配多余空間之前，為項(xiàng)目定義其占據(jù)的主軸空間

用來設(shè)置單個(gè)項(xiàng)目與其他項(xiàng)目不同的對(duì)齊方式，其屬性值和align-items的屬性的屬性值基本一致，不過其默認(rèn)值為auto，表示繼承父元素的屬性值。

CSS布局 + Flex布局

我們只會(huì)用到一點(diǎn)點(diǎn)兒CSS布局的屬性，雖然少，但既然要用到，就得把它們總結(jié)在這里，搞明白。

在了解CSS布局的相關(guān)屬性之前，我們先了解一下 盒子模型——CSS會(huì)把每個(gè)組件都看作是一個(gè)盒子，每個(gè)盒子從內(nèi)往外有三個(gè)部分：

組件的寬度和高度決定了它在屏幕上顯示的尺寸，一個(gè)組件的寬度和高度就是它 外邊框所包圍矩形 的寬度和高度，iOS里也是這樣的。

我們可以通過 width 和 height 屬性給一個(gè)組件設(shè)置固定的寬度，不過需要注意 這兩個(gè)屬性只能接收數(shù)值，不能帶單位，這是因?yàn)镽N要自己去適配安卓和iOS的單位。

在RN里，我們想讓一個(gè)組件自適應(yīng)寬高，要分兩步。 首先我們要讓該組件撐滿它的父視圖，即如果我們想自適應(yīng)寬度，就得先讓子視圖的寬度撐滿它父視圖的寬度，如果我們想自適應(yīng)高度，就得先讓子視圖撐滿它父視圖的高度，如果我們寬度和高度都想自適應(yīng)，就得先讓子視圖把它父視圖的寬度和高度都撐滿。然后才能像我們iOS里使用Masonry那樣，通過給組件添加上邊距、左邊距、下邊距、右邊距等約束來實(shí)現(xiàn)寬度和高度的自適應(yīng)。

這里再對(duì)第一步做個(gè)解釋， item的 flex: 1 屬性可以讓item在主軸上撐滿它的容器，容器的 alignItems: 'stretch' 屬性 + item在側(cè)軸上不設(shè)置空間可以讓item在側(cè)軸上撐滿它的容器。 好像有點(diǎn)不明白是吧，我們?cè)偻ㄟ^一個(gè)例子來說得明了點(diǎn)，RN里不是默認(rèn)主軸為豎向、側(cè)軸為橫向嘛，我們就采取這個(gè)默認(rèn)狀態(tài)來舉例子。 在RN里，默認(rèn)主軸為豎向、側(cè)軸為橫向的狀態(tài)下，如果我們想讓某個(gè)組件自適應(yīng)高度，就得首先在它自身上設(shè)置 flex: 1 屬性，來讓它的高度撐滿它的父視圖；如果我們想讓某個(gè)組件自適應(yīng)寬度，就得首先在它父視圖身上設(shè)置 alignItems: 'stretch' 屬性（當(dāng)然默認(rèn)就是這個(gè)值），這還不夠，你還得確保不給這個(gè)組件設(shè)置 width 屬性或者 width 屬性的值設(shè)為 auto ；如果我們想讓一個(gè)組件自適應(yīng)寬高，則兩者都得做。 當(dāng)然，如果我們?cè)O(shè)置了主軸為橫向、側(cè)軸為豎向，其實(shí)也是一樣的道理，自己捋一下就知道怎么做了。如果還是看不懂的話，沒有關(guān)系，下面我們會(huì)詳細(xì)談到這幾個(gè)屬性，等你學(xué)了這幾個(gè)屬性，反過頭來看這里就明白了。

Flex是Flexible Box的縮寫，可譯為靈活的、有彈性的盒子。那Flex布局就是Flexible Box布局的縮寫，就譯為彈性盒子布局，用來對(duì)一個(gè)盒子進(jìn)行靈活的布局。

在了解Flex布局之前，我們得先了解一下Flex布局里的兩對(duì)兒 重要的 概念。

采用Flex布局的組件，被稱為Flex容器（flex container），簡(jiǎn)稱容器（container）。

這個(gè)組件上的子組件，被稱為Flex項(xiàng)目（flex item），簡(jiǎn)稱item（項(xiàng)目）。

我們可以把容器和item看做是父視圖和子視圖的關(guān)系， 因此下文中的容器、父組件、父視圖將是一樣的概念，item、組件、子視圖將是一樣的概念，組件和視圖將是一樣的概念。

每個(gè)容器都有兩根軸，一個(gè)是 主軸， 一個(gè)是 側(cè)軸 。

容器里眾多的 item自動(dòng)沿主軸進(jìn)行排列。

一個(gè)item在主軸方向上所占據(jù)的空間稱為 main size ，一個(gè)item在側(cè)軸方向上所占據(jù)的空間稱為 cross size 。

RN里主軸的默認(rèn)方向?yàn)樨Q向，側(cè)軸為橫向。 瀏覽器里主軸的默認(rèn)方向?yàn)闄M向，側(cè)軸為豎向，下面我們講Flex布局的屬性時(shí)會(huì)采用瀏覽器的狀態(tài)，學(xué)會(huì)后對(duì)應(yīng)到RN里，換個(gè)主軸方向就可以了。

用在容器上的屬性，最常用的有 5個(gè) ， 而且這些屬性還都不是從來設(shè)置容器自己的布局，而是用來設(shè)置容器里item的布局。

flex-direction 屬性用來設(shè)置主軸的方向，即容器里item自動(dòng)排列的方向。 在瀏覽器里，主軸的方向默認(rèn)為橫向，所以 flex-direction 屬性的默認(rèn)值為 row 。

它有4種取值。

justify-content 屬性用來設(shè)置item在主軸上的對(duì)齊方式。

它有5種取值。

align-items 屬性用來設(shè)置item在側(cè)軸上的對(duì)齊方式。

它有5種取值。

默認(rèn)情況下，一個(gè)容器只有一條主軸，所有的item都會(huì)沿著這條主軸自動(dòng)排列下去，但是如果item太多了，一個(gè)屏幕長(zhǎng)度的主軸根本串兒不下這么多item，那后面的item就會(huì)溢出屏幕，而界面還不是 ScrollView ，不能滾動(dòng)，怎么辦呢？

flex-wrap 屬性用來設(shè)置換行，即當(dāng)容器主軸上顯示不下那么多的item時(shí)，我們可以讓item換行來顯示，并且一旦設(shè)置了換行，那么這個(gè)容器就不再是一條主軸了，而是會(huì)有多條平行的主軸。

它有3種取值。

align-content 屬性用來設(shè)置多條主軸的對(duì)齊方式， 如果項(xiàng)目只有一根軸線，該屬性不起作用， 即 align-content 屬性要基于 flex-wrap 屬性設(shè)置了換行才有使用的意義。

它有6種取值。

用在item上的屬性，最常用的有 2個(gè) ， 這些屬性都是用來設(shè)置item自己的布局。

在第1小節(jié)容器的屬性，我們已經(jīng)通過 align-items 屬性統(tǒng)一設(shè)置了容器里item在側(cè)軸上的對(duì)齊方式，但如果其中某個(gè)item不想遵循這個(gè)對(duì)齊方式怎么辦呢？我們會(huì)常見到這種場(chǎng)景，10個(gè)里有8個(gè)item是一樣的對(duì)齊方式，就有1、2個(gè)item特立獨(dú)行，那我們就得用item自己的 align-self 屬性來單獨(dú)給它們?cè)O(shè)置對(duì)齊方式了。

align-self 屬性用來設(shè)置單個(gè)item在側(cè)軸上的對(duì)齊方式， 注意是給特立獨(dú)行的單個(gè)item設(shè)置哦，而且是側(cè)軸，它會(huì)覆蓋它容器的 align-items 屬性，當(dāng)然如果不設(shè)置這個(gè)屬性，默認(rèn)值就為 auto ，即item會(huì)默認(rèn)使用容器的 align-items 屬性給它設(shè)置的對(duì)齊方式。

它有6種取值，除了 auto ，其他都與 align-items 屬性完全一致。怎么說呢，item的 align-self 屬性似乎是用來造反的，反抗它容器的 align-items 屬性。

flex 屬性接收一個(gè)整數(shù)值， flex 屬性描述起來太麻煩了，可以自行去搜索加深理解，我這里只列舉出它的用途及注意事項(xiàng)。

（1） flex 屬性有三個(gè)用途

（2）使用 flex 屬性需注意

iOS里怎么使用Masonry布局的，RN里就怎么使用 Flex布局+CSS布局 來做布局就行了，它們布局的思路是一樣的， 一個(gè)組件也同樣至少需要四個(gè)約束。

當(dāng)然，它們之間有一個(gè)極其細(xì)小的差別，那就是：上面提到的“RN里組件自適應(yīng)寬高分兩步”，而iOS里Masonry才不管你什么撐滿不撐滿呢。

當(dāng)然，它們之間有一個(gè)極其巨大的差別，那就是：iOS里是沒有主軸和側(cè)軸之分的，你可以在一個(gè)父視圖上橫向、豎向同時(shí)放控件，并同時(shí)完成橫向和豎向的布局。但RN里有主軸和側(cè)軸之分，我們添加的組件只會(huì)沿著主軸排列，不可能同時(shí)出現(xiàn)橫向和豎向排列，并且布局的時(shí)候也只能是沿著主軸布局，不可能同時(shí)完成兩個(gè)方向的布局。

下面我們就通過幾個(gè)小練習(xí)，來對(duì)比一下Masonry布局和Flex布局+CSS布局的思路，加深對(duì)RN里怎么布局組件的理解。

Masonry：

Flex布局+CSS布局：

Masonry：

Flex布局+CSS布局：

Masonry：

Flex布局+CSS布局：

Masonry：

Flex布局+CSS布局：

參考博客：

阮一峰的《Flex布局：語法篇》

阮一峰的《Flex布局：實(shí)例篇》

網(wǎng)頁題目：css樣式flex,CSS樣式表可以將格式和結(jié)構(gòu)分離
轉(zhuǎn)載源于：http://chinadenli.net/article24/dsdiice.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、網(wǎng)站收錄、云服務(wù)器、Google、網(wǎng)頁設(shè)計(jì)公司、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)