資訊專欄INFORMATION COLUMN
摘要：關(guān)于結(jié)合實(shí)現(xiàn)居中的原理探討前情提要在居中對(duì)齊的方法中常用的一種方法之一，就是使用絕對(duì)定位結(jié)合實(shí)現(xiàn)居中，探討原理之前先來看一下實(shí)現(xiàn)代碼和實(shí)現(xiàn)效果預(yù)覽上面的實(shí)現(xiàn)效果最主要的代碼如下解讀由此可見主要是由的百分比和百分比實(shí)現(xiàn)的，那我們接下來就有
關(guān)于 top、left 結(jié)合 translate 實(shí)現(xiàn)居中的原理探討 前情提要
在居中對(duì)齊的方法中常用的一種方法之一，就是使用絕對(duì)定位結(jié)合 translate、top、left實(shí)現(xiàn)居中，探討原理之前先來看一下實(shí)現(xiàn)代碼和實(shí)現(xiàn)效果：
預(yù)覽
上面的實(shí)現(xiàn)效果最主要的代碼如下：
.out {
position: relative;
}
.in {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
解讀：由此可見主要是由top、left的百分比和translate百分比實(shí)現(xiàn)的，那我們接下來就有必要講一下兩者百分比的原理了：
top、left的百分比的原理從上述的代碼和效果中可以看出，居中對(duì)齊的實(shí)現(xiàn)是依靠了top/left的的百分比來實(shí)現(xiàn)的，而且還是正的百分比，下面我們先給出其百分比和位置的公式：
X（內(nèi)X軸偏移量） = width（外） * left百分比（內(nèi)）
Y（內(nèi)Y軸偏移量） = height（外） * top百分比（內(nèi)）
演示：
預(yù)覽
translate的百分比的原理從上述的代碼和效果中可以看出，居中對(duì)齊的實(shí)現(xiàn)是還依靠了translate，而且還是負(fù)的百分比，下面我們先給出它百分比和位置的公式：
X（內(nèi)X軸偏移量） = width（內(nèi)） * translateX百分比（內(nèi)）
Y（內(nèi)Y軸偏移量） = height（內(nèi)） * translateY百分比（內(nèi)）
演示
預(yù)覽
總結(jié)從上述的原理解讀中可以看出最終的位置的計(jì)算公式是：
X（內(nèi)X軸偏移量） = width（外） left百分比（內(nèi)） + width（內(nèi)） translateX百分比（內(nèi)）
Y（內(nèi)Y軸偏移量） = height（外） top百分比（內(nèi)） + height（內(nèi)） translateY百分比（內(nèi)）
即：
X（內(nèi)X軸偏移量） = 300 50% + 100 -50% = 100
Y（內(nèi)X軸偏移量） = 300 50% + 100 -50% = 100
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/115696.html
摘要：前幾天去一家互聯(lián)網(wǎng)公司面試，面試官問到了這個(gè)應(yīng)該算是比較簡單的問題，在我自認(rèn)為回答正確時(shí)，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這個(gè)問題思路絕對(duì)定位居中原始版這個(gè)是我回答出來的，也是被各位所熟知的一種方法，設(shè)外層相對(duì)定位，內(nèi) 前幾天去一家互聯(lián)網(wǎng)公司面試，面試官問到了這個(gè)應(yīng)該算是比較簡單的問題，在我自認(rèn)為回答正確時(shí)，才知道這道題的答案有很多種，下面就讓我們一起來探討一下這...
摘要：方法介紹垂直水平居中是日常前端開發(fā)當(dāng)中一個(gè)常見的需求，在支持屬性的現(xiàn)代瀏覽器當(dāng)中，有一個(gè)利用屬性的垂直水平居中方法例子傳送門請(qǐng)用現(xiàn)代瀏覽器打開從上面的例子看到，無論我們?cè)鯓诱{(diào)整窗口的大小，紅色方塊始終會(huì)在窗口垂直水平居中。 方法介紹 垂直水平居中是日常前端開發(fā)當(dāng)中一個(gè)常見的需求，在支持 CSS3 屬性的現(xiàn)代瀏覽器當(dāng)中，有一個(gè)利用 CSS3 屬性的垂直水平居中方法： .cente...
摘要：前言一直有個(gè)想法要把各種居中的方法總結(jié)一下，但還是一直沒有時(shí)間去整理。最近剛好在做樣式重構(gòu)的項(xiàng)目，順便把一下自己有用過的或積累的居中方法給總結(jié)一下。又必須有個(gè)父級(jí)對(duì)其進(jìn)行設(shè)置居中。 前言 一直有個(gè)想法要把各種居中的方法總結(jié)一下，但還是一直沒有時(shí)間去整理。最近剛好在做樣式重構(gòu)的項(xiàng)目，順便把一下自己有用過的或積累的居中方法給總結(jié)一下。 水平居中 行內(nèi)元素水平居中 行內(nèi)元素的居中比較簡單，直...
摘要：在通常情況下，對(duì)那些需要居中的元素來說，其尺寸往往是由其內(nèi)容來決定的。雖然沒有垂直居中效果，但也是完全可以接受的。的另一個(gè)好處在于，它還可以將匿名容器即沒有被標(biāo)簽包裹的文本節(jié)點(diǎn)垂直居中。 主要摘自：《CSS 揭秘》，強(qiáng)烈推薦的一本書。 44 年前我們就把人類送上月球了，但現(xiàn)在我們?nèi)匀粺o法在 CSS 中 實(shí)現(xiàn)垂直居中。——James Anderson(https://twitter.co...
摘要：前言居中是網(wǎng)頁布局中再常見不過的一種方式了，今天我們就來聊聊居中的那點(diǎn)事。我是水平居中的同樣是針對(duì)塊級(jí)元素才有效果。來看代碼我是水平居中的必須配合來使用來可以實(shí)現(xiàn)居中的效果。方法二我是垂直居中的注意此方法要考慮的兼容性問題。 前言：居中是網(wǎng)頁布局中再常見不過的一種方式了，今天我們就來聊聊css居中的那點(diǎn)事。 我們主要從這幾個(gè)方面來了解下居中： 水平居中 垂直居中 水平垂直居中 水平...
閱讀 2312·2021-11-05 09:42
閱讀 3027·2021-09-23 11:21
閱讀 3005·2019-08-30 14:00
閱讀 3453·2019-08-30 13:15
閱讀 626·2019-08-29 17:18
閱讀 3692·2019-08-29 16:29
閱讀 2930·2019-08-29 14:06
閱讀 2944·2019-08-23 14:41
