關于 top、left 結合 translate 實現居中的原理探討

Kyxy 發布于2019-08-30 14:00 / 2840人閱讀

摘要：關于結合實現居中的原理探討前情提要在居中對齊的方法中常用的一種方法之一，就是使用絕對定位結合實現居中，探討原理之前先來看一下實現代碼和實現效果預覽上面的實現效果最主要的代碼如下解讀由此可見主要是由的百分比和百分比實現的，那我們接下來就有

關于 top、left 結合 translate 實現居中的原理探討 前情提要

在居中對齊的方法中常用的一種方法之一，就是使用絕對定位結合 translate、top、left實現居中，探討原理之前先來看一下實現代碼和實現效果：

預覽

上面的實現效果最主要的代碼如下：

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

解讀：由此可見主要是由top、left的百分比和translate百分比實現的，那我們接下來就有必要講一下兩者百分比的原理了：

top、left的百分比的原理

從上述的代碼和效果中可以看出，居中對齊的實現是依靠了top/left的的百分比來實現的，而且還是正的百分比，下面我們先給出其百分比和位置的公式：

X（內X軸偏移量） = width（外） * left百分比（內）
  Y（內Y軸偏移量） = height（外） * top百分比（內）

演示：

預覽

translate的百分比的原理

從上述的代碼和效果中可以看出，居中對齊的實現是還依靠了translate，而且還是負的百分比，下面我們先給出它百分比和位置的公式：

X（內X軸偏移量） = width（內） * translateX百分比（內）
  Y（內Y軸偏移量） = height（內） * translateY百分比（內）

演示

預覽

總結

從上述的原理解讀中可以看出最終的位置的計算公式是：

X（內X軸偏移量） = width（外）  left百分比（內） + width（內）  translateX百分比（內）
  Y（內Y軸偏移量） = height（外）  top百分比（內） + height（內）  translateY百分比（內）

即：

X（內X軸偏移量） = 300  50% + 100  -50% = 100
Y（內X軸偏移量） = 300  50% + 100  -50% = 100

云服務器 GPU云服務器關于asp的工作原理關于后臺服務器的原理 volatile的實現原理回調的原理、實現與應用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115696.html

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

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

joyqi 2019-08-29 11:04 評論0 收藏0
從一個居中方法說起 —— 談 translate 與相對、絕對定位

摘要：方法介紹垂直水平居中是日常前端開發當中一個常見的需求，在支持屬性的現代瀏覽器當中，有一個利用屬性的垂直水平居中方法例子傳送門請用現代瀏覽器打開從上面的例子看到，無論我們怎樣調整窗口的大小，紅色方塊始終會在窗口垂直水平居中。方法介紹垂直水平居中是日常前端開發當中一個常見的需求，在支持 CSS3 屬性的現代瀏覽器當中，有一個利用 CSS3 屬性的垂直水平居中方法： .cente...

DandJ 2019-08-28 18:03 評論0 收藏0
css居中總結

摘要：前言一直有個想法要把各種居中的方法總結一下，但還是一直沒有時間去整理。最近剛好在做樣式重構的項目，順便把一下自己有用過的或積累的居中方法給總結一下。又必須有個父級對其進行設置居中。前言一直有個想法要把各種居中的方法總結一下，但還是一直沒有時間去整理。最近剛好在做樣式重構的項目，順便把一下自己有用過的或積累的居中方法給總結一下。水平居中行內元素水平居中行內元素的居中比較簡單，直...

gxyz 2019-08-30 15:55 評論0 收藏0
老生常談之CSS的垂直居中

摘要：在通常情況下，對那些需要居中的元素來說，其尺寸往往是由其內容來決定的。雖然沒有垂直居中效果，但也是完全可以接受的。的另一個好處在于，它還可以將匿名容器即沒有被標簽包裹的文本節點垂直居中。主要摘自：《CSS 揭秘》，強烈推薦的一本書。 44 年前我們就把人類送上月球了，但現在我們仍然無法在 CSS 中實現垂直居中。——James Anderson(https://twitter.co...

CompileYouth 2019-08-30 15:55 評論0 收藏0
【第1期】聊聊css居中那點事

摘要：前言居中是網頁布局中再常見不過的一種方式了，今天我們就來聊聊居中的那點事。我是水平居中的同樣是針對塊級元素才有效果。來看代碼我是水平居中的必須配合來使用來可以實現居中的效果。方法二我是垂直居中的注意此方法要考慮的兼容性問題。前言：居中是網頁布局中再常見不過的一種方式了，今天我們就來聊聊css居中的那點事。我們主要從這幾個方面來了解下居中：水平居中垂直居中水平垂直居中水平...

劉永祥 2019-08-30 15:55 評論0 收藏0