成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css篇之a(chǎn)bsolute絕對定位元素居中技巧

zhoutao / 2257人閱讀

摘要:一般地,居中絕對定位元素,再負(fù)值或者通過也可達(dá)到效果。今天發(fā)現(xiàn)另一個技巧,利用,取值,再即可實(shí)現(xiàn)居中。原因注子元素大的話,上下可居中,左右失效。

一般地,居中絕對定位元素,left:50%;top:50%;margin負(fù)值或者通過transform也可達(dá)到效果。
今天發(fā)現(xiàn)另一個技巧,利用,top,left,right,bottom取值0,再magin:auto,即可實(shí)現(xiàn)居中。
原因:

For absolutely positioned elements, the top, right, bottom,and left properties specify offsets from the edge of the element"s containing block (what the element is positioned relative to).The margin of the element is then positioned inside these offsets.
div.box{
   position: relative;
   height: 300px;
   background: #989eaa;
}
div.fz{
   width: 100px;
   height: 100px;
   background: #499682;
   position: absolute;
   top:0;
   left: 0;
   right: 0;
   bottom: 0;
   margin:auto;
}

注:子元素大的話,上下可居中,左右失效。

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

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/50415.html

相關(guān)文章

  • css篇之absolute絕對定位元素居中技巧

    摘要:一般地,居中絕對定位元素,再負(fù)值或者通過也可達(dá)到效果。今天發(fā)現(xiàn)另一個技巧,利用,取值,再即可實(shí)現(xiàn)居中。原因注子元素大的話,上下可居中,左右失效。 一般地,居中絕對定位元素,left:50%;top:50%;再margin負(fù)值或者通過transform也可達(dá)到效果。今天發(fā)現(xiàn)另一個技巧,利用,top,left,right,bottom取值0,再magin:auto,即可實(shí)現(xiàn)居中。原因: F...

    smallStone 評論0 收藏0
  • CSS水平或垂直居中技巧

    摘要:適用情景單對象水平居中原理將子元素設(shè)置塊級表格,再設(shè)置水平居中。結(jié)語有些是水平居中,有些是垂直居中,將它們某兩個合在一起就能實(shí)現(xiàn)水平和垂直均居中。 前言 css水平和垂直居中是一個亙古不變的話題,它常常出現(xiàn)在優(yōu)美的網(wǎng)頁上以及各大前端面試當(dāng)中。說來慚愧,在兩年前面試的時候,我完全不知道如何做到水平和垂直均居中的方法,那場面別提有多尷尬了(ps:特想找個地洞鉆進(jìn)去)。。。時隔兩年,對于這個...

    CastlePeaK 評論0 收藏0
  • 關(guān)于css布局、居中的問題以及一些小技巧

    摘要:例一個高的,里面的文字垂直居中使該元素變大倍動畫過渡效果 CSS的兩種經(jīng)典布局 左右布局 一欄定寬,一欄自適應(yīng) 定寬 自適應(yīng) .left{ width: 200px; height: 600px; float: left; display: table; text-align: ...

    zacklee 評論0 收藏0
  • CSS 各種定位(position)方式的區(qū)別

    摘要:絕對定位元素從文檔流刪除,并相對于包含塊定位。固定定位元素從文檔流刪除,并相對于瀏覽器視窗定位,因此不隨文檔滾動而移動。 定位(position) position: relative/absolute/fixed/static/inheri absolute :生成絕對定位的元素, 相對于最近一級的 定位不是 static 的父元素來進(jìn)行定位。 fixed (老IE不支持)生成絕...

    i_garfileo 評論0 收藏0

發(fā)表評論

0條評論

zhoutao

|高級講師

TA的文章

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