元素實(shí)現(xiàn)絕對(duì)居中的三種方法

Tonny 發(fā)布于2019-08-29 13:47 / 1112人閱讀

摘要：如何實(shí)現(xiàn)的頁面絕對(duì)居中為了看到效果，我們先給一個(gè)樣式方法一彈性布局第一種方法是彈性布局，父元素為，子元素順著父容器的主軸居中排列。此時(shí)將元素上移和左移元素自身大小的一半，就能使元素居中。

如何實(shí)現(xiàn)container的頁面絕對(duì)居中？

為了看到效果，我們先給container一個(gè)樣式

方法一：彈性布局

第一種方法是彈性布局，父元素display為flex，子元素順著父容器的主軸居中排列。

方法二：絕對(duì)定位，top和left固定后用margin移動(dòng)元素

元素實(shí)現(xiàn)絕對(duì)定位后，定義top和left分別為50%，此時(shí)元素的頂部位于頁面的縱向中軸，元素的左部位于橫向中軸，也就是仿佛將頁面均分為四塊，container的左上角頂點(diǎn)位于正中心。
此時(shí)將元素上移和左移元素自身大小的一半，就能使元素居中。

方法三：translate進(jìn)行平移

元素在頁面的位置為距離頂部和左部都為50%，用translate對(duì)元素實(shí)現(xiàn)位置的平移，移動(dòng)的大小就是自身長度和寬度的一半。

實(shí)現(xiàn)效果

GPU云服務(wù)器云服務(wù)器三種實(shí)現(xiàn)方法云計(jì)算的三種服務(wù)模式 asp支持的三種控件服務(wù)器的三種存儲(chǔ)方式

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

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

相關(guān)文章

構(gòu)建靜態(tài)頁面之 [ 布局 ]

摘要：布局描述表示對(duì)頁面中的顯示效果進(jìn)行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內(nèi)塊級(jí)元素水平居中的第一種方法該方法需作用在父子結(jié)構(gòu)中為父級(jí)設(shè)置屬性為子級(jí)設(shè)置屬性注意的問題屬性是設(shè)置文本內(nèi)容對(duì)齊方式的布局描述表示對(duì)頁面中的顯示效果進(jìn)行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中 + 行內(nèi)塊級(jí)元素（text-a...

andot 2019-08-29 16:31 評(píng)論0 收藏0
構(gòu)建靜態(tài)頁面之 [ 布局 ]

摘要：布局描述表示對(duì)頁面中的顯示效果進(jìn)行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中行內(nèi)塊級(jí)元素水平居中的第一種方法該方法需作用在父子結(jié)構(gòu)中為父級(jí)設(shè)置屬性為子級(jí)設(shè)置屬性注意的問題屬性是設(shè)置文本內(nèi)容對(duì)齊方式的布局描述表示對(duì)頁面中的顯示效果進(jìn)行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一種方式水平居中 + 行內(nèi)塊級(jí)元素（text-a...

JessYanCoding 2019-08-02 16:31 評(píng)論0 收藏0
截圖圖片兩邊使圖片在盒子里居中的三種方法

摘要：部分如下我用的是絕對(duì)定位我用的是我用的是左右大比例負(fù)以上就是截取隱藏圖片兩側(cè)讓圖片在盒子居中的種方法了，希望能能對(duì)大家有用。最近項(xiàng)目改版，需要在一個(gè)正方形的盒子區(qū)域中顯示圖片，由于舊數(shù)據(jù)中都是橫向長方形的圖片，舊數(shù)據(jù)又不能舍棄，產(chǎn)品就要求對(duì)于這種圖片進(jìn)行兩邊截取，在正方形盒子中只顯示圖片中間部分的（蛋）要（疼）求。經(jīng)過一番嘗試一共找到3種可以成功實(shí)現(xiàn)的方法，在此分享一下。原圖如下...

GHOST_349178 2019-08-29 12:53 評(píng)論0 收藏0
截圖圖片兩邊使圖片在盒子里居中的三種方法

摘要：部分如下我用的是絕對(duì)定位我用的是我用的是左右大比例負(fù)以上就是截取隱藏圖片兩側(cè)讓圖片在盒子居中的種方法了，希望能能對(duì)大家有用。最近項(xiàng)目改版，需要在一個(gè)正方形的盒子區(qū)域中顯示圖片，由于舊數(shù)據(jù)中都是橫向長方形的圖片，舊數(shù)據(jù)又不能舍棄，產(chǎn)品就要求對(duì)于這種圖片進(jìn)行兩邊截取，在正方形盒子中只顯示圖片中間部分的（蛋）要（疼）求。經(jīng)過一番嘗試一共找到3種可以成功實(shí)現(xiàn)的方法，在此分享一下。原圖如下...

import. 2019-08-01 17:07 評(píng)論0 收藏0
css元素居中方法歸納

摘要：水平和垂直方向都可居中統(tǒng)一代碼相同的代碼抽取絕對(duì)定位注意點(diǎn)生成絕對(duì)定位的元素，相對(duì)于定位以外的第一個(gè)父元素進(jìn)行定位。等不一定要設(shè)置為，只要和的值相等，即可實(shí)現(xiàn)水平居中。水平和垂直方向都可居中統(tǒng)一HTML代碼：相同的css代碼抽?。?.inner{ width: 50px; height: 50px; background-color: aqu...

Xufc 2019-08-30 15:55 評(píng)論0 收藏0