<rp id="kut09"><nav id="kut09"></nav></rp>
<rp id="kut09"></rp>
  • <tt id="kut09"></tt>
    <tt id="kut09"><tbody id="kut09"></tbody></tt>
    1. <u id="kut09"></u>
    2. <tt id="kut09"><noscript id="kut09"></noscript></tt>
    3. css 利用 position + margin 實現固定盒子橫向縱向居中的方法

        發布時間:2020-12-23 14:32:25   作者:352328759   我要評論
      這篇文章主要介紹了css 利用 position + margin 實現固定盒子橫向縱向居中的方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

      margin:auto; + position: absolute; 上下左右:0
      一看 demo 就懂的啦

      <!DOCTYPE html>
      <html>
      
      <head>
      	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      	<meta charset="utf-8">
      	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      	<title>利用 position + margin 實現固定盒子橫向縱向居中</title>
      	<style>
      		body * {
      			outline: 1px #ff0000 solid;
      		}
      
      		.father {
      			width: 500px;
      			height: 300px;
      			position: relative;
      		}
      
      		.father .son {
      			width: 180px;
      			height: 140px;
      			/*  */
      			position: absolute;
      			right: 0;
      			bottom: 0;
      			top: 0;
      			left: 0;
      			margin: auto;
      		}
      	</style>
      </head>
      
      <body>
      	<div class="father">
      		<div class="son">margin:auto + 上下左右:0</div>
      	</div>
      </body>
      
      </html>

      //end

      到此這篇關于css 利用 position + margin 實現固定盒子橫向縱向居中的方法的文章就介紹到這了,更多相關css固定盒子橫向縱向居中內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

      相關文章

      • CSS 同級元素position:fixed和margin-top共同使用的問題

        這篇文章主要介紹了CSS 同級元素position:fixed和margin-top共同使用的問題的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
        2018-09-13
      • 使用CSS實現盒子水平垂直居中的方法(8種)

        這篇文章主要介紹了使用CSS實現盒子水平垂直居中的方法(8種),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來
        2020-11-11
      • CSS盒子居中的常用的幾種方法(小結)

        這篇文章主要介紹了CSS盒子居中的常用的幾種方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學
        2020-03-31

      最新評論

      218彩票 www.ok1069.com:广州市| www.hrp4.com:荃湾区| www.chocolate-artist.com:崇文区| www.kebumenkeren.com:泾阳县| www.zfhsw.cn:台北市| www.mrtentllc.com:鲁甸县| www.zhiminjia.com:资源县| www.mbkty.cn:江永县| www.ivtvalvesindia.com:常山县| www.uflytech.com:桑日县| www.cw933.com:静乐县| www.aujardindesgraines.com:宁夏| www.hndth.com:杭锦旗| www.modernmosesclothingcompany.com:阜新市| www.aumetrodeslilas.com:阿合奇县| www.yihengart.com:宝清县| www.lanzengping.com:天峨县| www.zzliyu.com:临颍县| www.bellinghamkiwanis.com:兰州市| www.g888886.com:玛曲县| www.beautyonstage.com:油尖旺区| www.plastic-cn.com:中阳县| www.isi-stone.com:皋兰县| www.maestroluggage.com:三原县| www.jcsbw.com:邵阳县| www.dalyanpatiohotel.com:福安市| www.wwwhg5416.com:手机| www.satext.com:太白县| www.gqsh99.com:浠水县| www.newhavenph.com:嘉善县| www.ty3399.com:昌都县| www.thechamplife.com:南汇区| www.guggamugga.com:兴仁县| www.dayurexian.com:肇东市| www.dlbdl.com:安义县| www.keybiz.org:汉寿县| www.greenvocational.com:千阳县| www.fuxingcp.com:镇宁| www.yz-tygy.com:西盟| www.happydogvideo.com:股票| www.brainknittings.com:滦平县| www.politicallyscrewed.com:长兴县| www.mm7gg.com:论坛| www.mdgc360.com:勃利县| www.cnkaidajixie.com:康保县| www.yyyuanyi.com:裕民县| www.homelifepremier.com:轮台县| www.chateaudumarteray.com:华池县| www.autocar-dax.com:招远市| www.diendankientruc.net:上蔡县| www.cqgspclaw.com:陵川县| www.uearbitrage.com:宜阳县| www.hg19678.com:建宁县| www.cp6167.com:太白县| www.cp5157.com:鸡东县| www.o8o7.com:蕲春县| www.hbjtls.com:潼南县| www.jinjunepet.com:卓尼县| www.nesemancreative.com:沛县| www.xinya-painting.com:汨罗市| www.concordbeats.com:玉树县| www.themossmagazine.com:景谷| www.xzjwgczw.com:黄龙县| www.21wangmi.com:台江县| www.kmrln.cn:五华县| www.564rr.com:湘潭县| www.julie-lavergne.com:翁源县| www.leafwell.org:汝州市| www.jsljl.com:白河县| www.cbsrhelp.com:洛隆县| www.baina-edu.com:林口县| www.lvvbbe.com:泽库县| www.considerthereasons.com:辽阳县| www.altahrirtv.com:桐柏县| www.n9bx.com:安宁市| www.bp773.com:门头沟区| www.lavicardesigne.com:贡山| www.blogcampghana.com:兴隆县| www.zhiyitwp.com:肥乡县| www.alhondigadigital.com:绵竹市| www.ramadawg.com:锦屏县| www.gdgypvc.com:贵南县| www.ks-diaz.com:荥阳市| www.pj88853.com:江永县|