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

zhoutao 發(fā)布于2019-08-01 16:17 / 2231人閱讀

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

一般地，居中絕對(duì)定位元素，left:50%;top:50%;再margin負(fù)值或者通過(guò)transform也可達(dá)到效果。
今天發(fā)現(xiàn)另一個(gè)技巧，利用，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;
}

注：子元素大的話(huà)，上下可居中，左右失效。

GPU云服務(wù)器云服務(wù)器 absolute居中絕對(duì)居中文字絕對(duì)居中相對(duì)定位-絕對(duì)定位

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

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

相關(guān)文章

css篇之absolute絕對(duì)定位元素居中技巧

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

smallStone 2019-08-30 15:52 評(píng)論0 收藏0
CSS水平或垂直居中技巧

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

CastlePeaK 2019-08-30 11:22 評(píng)論0 收藏0
關(guān)于css布局、居中的問(wèn)題以及一些小技巧

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

zacklee 2019-08-29 16:55 評(píng)論0 收藏0
CSS 各種定位（position）方式的區(qū)別

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

i_garfileo 2019-08-29 11:18 評(píng)論0 收藏0