div垂直居中知幾種？

AZmake 發(fā)布于2019-08-30 14:22 / 2220人閱讀

摘要：結(jié)構(gòu)實(shí)現(xiàn)在中垂直居中方法一彈性盒子實(shí)現(xiàn)方法二和實(shí)現(xiàn)方法三方法四方法都是相對(duì)定位和絕對(duì)定位配合實(shí)現(xiàn)但是方式略有不同方法五和實(shí)現(xiàn)由于上傳圖片老是報(bào)錯(cuò)，后面會(huì)把圖片加上

html結(jié)構(gòu)：實(shí)現(xiàn)box在wrap中垂直居中

方法一 flex彈性盒子實(shí)現(xiàn)

.wrap {
    display: flex;
    align-items: center;
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
  }
  .box {
    width:100px;
    height: 100px;
    background: red;
  }

方法二 relative和absolute實(shí)現(xiàn)

  .wrap {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
  }
  .box {
    position: absolute;
    top: 50%;
    margin-top: -50px;
    width:100px;
    height: 100px;
    background: red;
  }

方法三

.wrap {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
  }
  .box {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width:100px;
    height: 100px;
    background: red;
  }

方法四

.wrap {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
  }
  .box {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width:100px;
    height: 100px;
    background: red;
  }

方法2-4 都是相對(duì)定位和絕對(duì)定位配合實(shí)現(xiàn), 但是方式略有不同

方法五 table-cell和vertical-align實(shí)現(xiàn)

.wrap {
    display: table-cell;
    vertical-align: middle;
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
  }
  .box {
    width:100px;
    height: 100px;
    background: red;
  }

由于上傳圖片老是報(bào)錯(cuò)，后面會(huì)把圖片加上

GPU云服務(wù)器云服務(wù)器垂直居中實(shí)現(xiàn)垂直居中水平垂直居中文字垂直居中

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115976.html

相關(guān)文章

使一個(gè)div垂直+水平居中的幾種方法

摘要：前幾天去一家互聯(lián)網(wǎng)公司面試，面試官問(wèn)到了這個(gè)應(yīng)該算是比較簡(jiǎn)單的問(wèn)題，在我自認(rèn)為回答正確時(shí)，才知道這道題的答案有很多種，下面就讓我們一起來(lái)探討一下這個(gè)問(wèn)題思路絕對(duì)定位居中原始版這個(gè)是我回答出來(lái)的，也是被各位所熟知的一種方法，設(shè)外層相對(duì)定位，內(nèi) 前幾天去一家互聯(lián)網(wǎng)公司面試，面試官問(wèn)到了這個(gè)應(yīng)該算是比較簡(jiǎn)單的問(wèn)題，在我自認(rèn)為回答正確時(shí)，才知道這道題的答案有很多種，下面就讓我們一起來(lái)探討一下這...

joyqi 2019-08-29 11:04 評(píng)論0 收藏0
垂直居中的幾種實(shí)現(xiàn)方法？

摘要：結(jié)構(gòu)效果如下優(yōu)點(diǎn)不用受內(nèi)容高度的限制，簡(jiǎn)單實(shí)現(xiàn)垂直居中缺點(diǎn)不兼容方法二這個(gè)方法使用絕對(duì)定位的，把它的設(shè)置為，設(shè)置為負(fù)的高度。這意味著對(duì)象必須在中指定固定的高度。使用使塊級(jí)元素垂直居中是很簡(jiǎn)單的。方法一：把一些 div 的顯示方式設(shè)置為表格，因此我們可以使用表格的 vertical-align屬性。結(jié)構(gòu)效果如下：http://jsfiddle.net/chic/4uduzb3t/1/...

sorra 2019-08-28 17:57 評(píng)論0 收藏0
(面試題)垂直居中的幾種實(shí)現(xiàn)方式

摘要：尤其是在實(shí)際頁(yè)面中，有很多特殊的場(chǎng)景，導(dǎo)致水平居中實(shí)現(xiàn)起來(lái)比較麻煩。這篇文章旨在紀(jì)錄一些我知道的居中方式。以一道經(jīng)典面試題為例一個(gè)的在一個(gè)水平垂直居中，用實(shí)現(xiàn)。首先定義元素層和垂直居中無(wú)關(guān)的樣式直接定義在里。相比較水平居中，垂直居中比較復(fù)雜點(diǎn)。尤其是在實(shí)際頁(yè)面中，有很多特殊的場(chǎng)景，導(dǎo)致水平居中實(shí)現(xiàn)起來(lái)比較麻煩。這篇文章旨在紀(jì)錄一些我知道的居中方式。以一道經(jīng)典面試題為例：一個(gè)200*2...

cheukyin 2019-08-30 11:18 評(píng)論0 收藏0
css水平垂直居中

摘要：要讓下圖中綠色框水平垂直居中，你是怎么實(shí)現(xiàn)的，可能每個(gè)人都有自己習(xí)慣的使用方法。把元素設(shè)為方法在父元素中設(shè)置和然后設(shè)置垂直對(duì)齊方式為居中就可以適合父元素高固定的，畢竟要設(shè)置行高。本篇博客首發(fā)于本人博客水平垂直居中要讓下圖中綠色框水平垂直居中，你是怎么實(shí)現(xiàn)的，可能每個(gè)人都有自己習(xí)慣的使用方法。下面是我總結(jié)的幾種方法廢話(huà)不多說(shuō)，直接上菜。showImg(http://ooa3lxrpg....

jaysun 2019-08-29 12:39 評(píng)論0 收藏0
css水平垂直居中

摘要：要讓下圖中綠色框水平垂直居中，你是怎么實(shí)現(xiàn)的，可能每個(gè)人都有自己習(xí)慣的使用方法。把元素設(shè)為方法在父元素中設(shè)置和然后設(shè)置垂直對(duì)齊方式為居中就可以適合父元素高固定的，畢竟要設(shè)置行高。本篇博客首發(fā)于本人博客水平垂直居中要讓下圖中綠色框水平垂直居中，你是怎么實(shí)現(xiàn)的，可能每個(gè)人都有自己習(xí)慣的使用方法。下面是我總結(jié)的幾種方法廢話(huà)不多說(shuō)，直接上菜。showImg(http://ooa3lxrpg....

blankyao 2019-08-01 16:54 評(píng)論0 收藏0