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