亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

沒(méi)錯(cuò)，css居中就是如此的簡(jiǎn)單！

pkwenda / 2686人閱讀

摘要：寫(xiě)在前面居中方案是一個(gè)老生常談的問(wèn)題，主要包括水平居中和垂直居中，水平居中大家用的比較多，最常用的莫過(guò)于方案了，而垂直居中，很多時(shí)候會(huì)讓很多新手頭疼。常用居中方案水平解決方案水平居中適用于已經(jīng)知道寬度，并且其父級(jí)寬度不為的元素水平居中。

寫(xiě)在前面

css居中方案是一個(gè)老生常談的問(wèn)題，主要包括水平居中和垂直居中，水平居中大家用的比較多，最常用的莫過(guò)于margin:0 auto方案了，而垂直居中，很多時(shí)候會(huì)讓很多新手頭疼。

常用居中方案（水平）

margin：0 auto解決方案 （水平居中）

適用于已經(jīng)知道寬度，并且其父級(jí)寬度不為0的元素水平居中。



    
哈哈哈哈



 

.parent {
    width:800px;
}
.child {
    width:20%;//也可以是固定像素
    margin:0 auto;
}

2.利用text-align:center使行內(nèi)元素水平居中(水平居中)




   哈哈哈哈





div {
    text-align:center
}

3.flex水平居中




    
哈哈哈哈





.parent {
    display:flex;
    justify-content:center
}

4.絕對(duì)定位利用負(fù)邊距居中(已知寬度)




    
哈哈哈哈





.parent {
    position:relative;
}
.child {
    width:500px;
    position: absolute;
}

5.絕對(duì)定位不知寬度居中，可以利用css transform屬性，也可以利用flex居中




    
哈哈哈哈





.parent {
    position:relative;
}
.child {
    position: absolute;
    left:50%;
    transform:translate(-50%);
}
垂直居中方案

1.不知寬高，兼容性很高的居中方案。




    
哈哈哈哈





.parent {
    position:relative;
}
.child {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

2.利用行高進(jìn)行居中,行高和高度一致




    
哈哈哈哈





.parent {
    height:50px;
    line-height:50px;
}

3.flex方案




    
哈哈哈哈





.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

4.transform方案




    
哈哈哈哈





.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

5.已知父級(jí)高度，利用margin-top進(jìn)行居中，該方案過(guò)于簡(jiǎn)單，就不貼代碼了
6.絕對(duì)定位，使用負(fù)邊距居中




    
哈哈哈哈





.parent {
    position: relative;
}
.child {
  position: absolute;
  width:500px;
  height:500px;
  top: 50%;
  left: 50%;
  margin-top:-250px;
  margin-left:-250px;
}

還有一種是利用table方案居中，我覺(jué)得這種方案可能過(guò)時(shí)了，想了解的話(huà)可以自己百度一下

寫(xiě)在最后

本文已經(jīng)列出了大多情況下都可以解決的居中方案，還有一些比較居中，例如浮動(dòng)元素居中可以參考絕對(duì)定位居中，如果不考慮兼容性的話(huà)，flex居中是最方便的方案，大家可以自由的去根據(jù)實(shí)際情況去選擇需要的方案

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

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

相關(guān)文章

  • 從頭開(kāi)始 — CSS — 垂直居中

    摘要：基于特有的屬性擁有內(nèi)聯(lián)元素的特性同時(shí)可以定義寬高，我們可以設(shè)置一個(gè)行內(nèi)塊用于定義高度，再讓其他內(nèi)聯(lián)元素與其對(duì)齊，實(shí)現(xiàn)垂直居中。如果居中的元素超過(guò)了視窗會(huì)被裁剪掉。使用時(shí)，不僅在水平方向上將元素居中，垂直方向上也是如此。 事實(shí)上，每次面試前端必問(wèn)的問(wèn)題就是這個(gè)。及其常見(jiàn)的需求，看起來(lái)似乎非常簡(jiǎn)單，但是實(shí)現(xiàn)起來(lái)很費(fèi)勁，尤其是涉及尺寸不固定的元素。 本篇文章將介紹比較流行的幾種方法。 行內(nèi)塊...

    wuaiqiu 評(píng)論0 收藏0

  • 從頭開(kāi)始 — CSS — 垂直居中

    摘要：基于特有的屬性擁有內(nèi)聯(lián)元素的特性同時(shí)可以定義寬高，我們可以設(shè)置一個(gè)行內(nèi)塊用于定義高度，再讓其他內(nèi)聯(lián)元素與其對(duì)齊，實(shí)現(xiàn)垂直居中。如果居中的元素超過(guò)了視窗會(huì)被裁剪掉。使用時(shí)，不僅在水平方向上將元素居中，垂直方向上也是如此。 事實(shí)上，每次面試前端必問(wèn)的問(wèn)題就是這個(gè)。及其常見(jiàn)的需求，看起來(lái)似乎非常簡(jiǎn)單，但是實(shí)現(xiàn)起來(lái)很費(fèi)勁，尤其是涉及尺寸不固定的元素。 本篇文章將介紹比較流行的幾種方法。 行內(nèi)塊...

    NoraXie 評(píng)論0 收藏0

  • 老生常談之CSS的垂直居中

    摘要：在通常情況下，對(duì)那些需要居中的元素來(lái)說(shuō)，其尺寸往往是由其內(nèi)容來(lái)決定的。雖然沒(méi)有垂直居中效果，但也是完全可以接受的。的另一個(gè)好處在于，它還可以將匿名容器即沒(méi)有被標(biāo)簽包裹的文本節(jié)點(diǎn)垂直居中。 主要摘自：《CSS 揭秘》，強(qiáng)烈推薦的一本書(shū)。 44 年前我們就把人類(lèi)送上月球了，但現(xiàn)在我們?nèi)匀粺o(wú)法在 CSS 中 實(shí)現(xiàn)垂直居中。——James Anderson(https://twitter.co...

    CompileYouth 評(píng)論0 收藏0

  • python

    Python裝飾器為什么難理解？ 無(wú)論項(xiàng)目中還是面試都離不開(kāi)裝飾器話(huà)題，裝飾器的強(qiáng)大在于它能夠在不修改原有業(yè)務(wù)邏輯的情況下對(duì)代碼進(jìn)行擴(kuò)展，權(quán)限校驗(yàn)、用戶(hù)認(rèn)證、日志記錄、性能測(cè)試、事務(wù)處理、緩存等都是裝飾器的絕佳應(yīng)用場(chǎng)景，它能夠最大程度地對(duì)代碼進(jìn)行復(fù)用。 但為什么初學(xué)者對(duì)裝飾器的理解如此困難，我認(rèn)為本質(zhì)上是對(duì)Py… Python 實(shí)現(xiàn)車(chē)牌定位及分割 作者用 Python 實(shí)現(xiàn)車(chē)牌定位及分割的實(shí)踐。 ...

    chenatu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<