国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

一些實(shí)現(xiàn)垂直居中的方法

legendaryedu / 1366人閱讀

摘要：設(shè)置，相當(dāng)于是表格的，單元格所包含的內(nèi)聯(lián)元素可以實(shí)現(xiàn)垂直居中。使用居中這個(gè)不多說了下面的實(shí)現(xiàn)方法，相對來說不那么常規(guī)內(nèi)聯(lián)元素實(shí)現(xiàn)居中這種方法需要多加一個(gè)內(nèi)聯(lián)元素，讓它的高度和父級元素的高度一致，再通過來實(shí)現(xiàn)。

垂直居中在項(xiàng)目中有廣泛應(yīng)用，而且在各個(gè)公司面試中貌似被問到的情況也比較多，這里總結(jié)了一些常用的方法以及一些比較怪異的方法，僅供參考。
先設(shè)置下基礎(chǔ)樣式

    section {
        width: 300px;
        height: 300px;
        background: #03A9F4;
    }
    .block {
        width: 50px;
        height: 50px;
        color: #fff;
        background: #FFCA28;
    }
使用flexbox

flexbox是我現(xiàn)在最常用的布局方法，可以設(shè)置justify-content和align-items輕松實(shí)現(xiàn)水平以及垂直居中，而且不用在意父元素和子元素的高度。
table-cell

設(shè)置display: table-cell，相當(dāng)于是表格的td，單元格所包含的內(nèi)聯(lián)元素可以實(shí)現(xiàn)垂直居中。
子元素絕對定位

子元素相對于父元素絕對定位，再將子元素位置適當(dāng)調(diào)整，兩種調(diào)整方式：

負(fù)margin，適用子元素寬高已知情況

translate變換，可以調(diào)整未知大小的塊
line-height

line-height可以改變行高，可以使內(nèi)聯(lián)元素居中，需要已知父元素的高度
動態(tài)計(jì)算

基本思路是子元素相對父級絕對定位，根據(jù)父元素寬高和自身大小改變left和top值。
這里可以使用calc()方法，但需要已知子元素寬高。
如果子元素大小不確定，可以使用JS來改變位置。

使用margin居中

這個(gè)不多說了

下面的實(shí)現(xiàn)方法，相對來說不那么常規(guī)

內(nèi)聯(lián)元素實(shí)現(xiàn)居中

這種方法需要多加一個(gè)內(nèi)聯(lián)元素，讓它的高度和父級元素的高度一致，再通過vertical-align: middle來實(shí)現(xiàn)。
利用縮放

本質(zhì)上是改變了元素的大小，因?yàn)?b>transform-origin默認(rèn)在50% 50%，所以看起來就是居中的效果了

所有可以水平居中的方法

這個(gè)有點(diǎn)皮
所有實(shí)現(xiàn)了水平居中的，可以讓父元素旋轉(zhuǎn)90度，子元素再反方向旋轉(zhuǎn)回來

其他想到再補(bǔ)充

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113439.html

相關(guān)文章

  • css 垂直居中方法匯總

    摘要：優(yōu)點(diǎn)寫法簡單，適應(yīng)性好缺點(diǎn)兼容性一般，不支持瀏覽器小節(jié)以上共有種方式來實(shí)現(xiàn)垂直居中的效果，個(gè)人是最青睞第種方式的，兼容性好，適應(yīng)性好，各位小伙伴還有沒有其他的實(shí)現(xiàn)方式呢 查看原文可以有更好的排版效果哦 前言 居中是平時(shí)工作中的最常見的一種需求，各種圖片居中或者各種彈窗，水平居中還好，特別是垂直居中，很多初學(xué)者表示太難寫了，現(xiàn)在列舉一些常用的方法。 實(shí)戰(zhàn) 這里只講述css相關(guān)的方法，js...

    CarterLi 評論0 收藏0

  • CSS—總結(jié)常用垂直居中方法

    摘要：總結(jié)常用垂直居中方法與方法實(shí)現(xiàn)居中這是比較常用的方法。絕對居中實(shí)現(xiàn)垂直居中這是一個(gè)兼容性比較好的能夠?qū)崿F(xiàn)垂直居中的方法。 CSS—總結(jié)常用垂直居中方法 1、text-align與line-hight方法實(shí)現(xiàn)居中 這是比較常用的方法。通過line-hight來設(shè)置行間距是實(shí)現(xiàn)垂直居中的關(guān)鍵 .wrap{ width: 500px; heidth: 200px; l...

    asoren 評論0 收藏0

  • 主流的CSS水平和垂直居中技術(shù)大全

    摘要：水平居中行內(nèi)元素的水平居中在父元素中設(shè)置只對內(nèi)聯(lián)元素或行內(nèi)塊元素有效需要放置于父元素中塊級元素的水平居中只對塊級元素有效指的是自適應(yīng)寬度。參考張鑫旭實(shí)現(xiàn)絕對定位元素的居中及原理居中方式水平居中垂直居中塊級元素設(shè)置內(nèi)聯(lián)元素設(shè)置。 原文地址：https://www.xksblog.top/CSS-mainstream-centering-techniques.html 幾個(gè)月也零零散散學(xué)...

    KoreyLee 評論0 收藏0

  • 前端-CSS3&H5

    摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會在開發(fā)中使用，但是其中也會涉及一些知識點(diǎn)。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不...

    xiaolinbang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<