<font id="nc9yk"></font>
  • <tt id="nc9yk"></tt>
          <rp id="nc9yk"><optgroup id="nc9yk"></optgroup></rp>
          <tt id="nc9yk"><form id="nc9yk"></form></tt>

            <cite id="nc9yk"></cite>

            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

            最新評論

            hao500彩票 www.maranathawichita.com:阜阳市| www.xuenaruipet.com:涟水县| www.eng-tech-group.com:姚安县| www.my-testimony.org:周至县| www.tw-graphics.com:榕江县| www.723421.com:石首市| www.oxford2cambridge.net:宜君县| www.fnp-co.com:南召县| www.suntopcar.com:沽源县| www.spielothekspiele.com:灵武市| www.gwmak.com:南召县| www.mystiquesppo.com:卢龙县| www.cox2go.com:南城县| www.tbgnr.com:黔江区| www.monobin.com:南投县| www.sulamalisjogja.com:乌兰察布市| www.yyyuanyi.com:瑞丽市| www.mejoresamigas.net:海淀区| www.ypiasby.com:潮安县| www.fomrf.org:凤冈县| www.qxtongbeng.com:蒲城县| www.mofo-nyc.com:长阳| www.aec-avocats.com:察雅县| www.izi2.com:营山县| www.dlbdl.com:辉南县| www.egehannakliyat.com:辽中县| www.zshuamao.com:申扎县| www.kidizzle.com:梧州市| www.cnshippingk.com:清苑县| www.zj-888.com:揭东县| www.tyaslab.com:金溪县| www.maxxsaccessoires.com:普洱| www.masyyy.com:永吉县| www.bifeixini.com:荣昌县| www.mlshgs.com:绥江县| www.chryslermodules.com:汾阳市| www.chian-ef.com:广丰县| www.lianyunlipin.com:喜德县| www.skzs-china.com:敦煌市| www.d3mm.com:大渡口区| www.beautysalonsolutions.com:岳西县| www.flooringhelper.com:浏阳市| www.pokerglyphs.com:南岸区| www.yijingdec.com:桦甸市| www.hongliansy.com:朝阳县| www.qylvod.com:元谋县| www.yaonvguan.com:麻城市| www.marketwus.com:上林县| www.tea778.com:乡宁县| www.creepyfan.com:弥勒县| www.agenciaaccords.com:芦溪县| www.samo-eg.com:泸州市| www.tudakozoonline.com:安吉县| www.epwiforum.com:固原市| www.cash618.com:枝江市| www.dma-chap8.com:伊宁县| www.sandillc.com:卢龙县| www.rldmw.cn:英吉沙县| www.lyhszp.com:宜兴市| www.1958difan.com:新乡县| www.3654388.com:永川市| www.southerncrossnat.com:阜康市| www.sihushiping.com:玉门市| www.wapgdp.com:上林县| www.primal2.com:桑植县| www.ccjxbm.com:汝阳县| www.ningmengwl.com:当阳市| www.youqushu.com:南靖县| www.jinshayule53.com:南涧| www.bihanorantiqha.com:上思县| www.hg38345.com:涟水县| www.x5china.com:油尖旺区| www.concreteinanyform.com:贵州省| www.bymio.com:昌江| www.ydgongce.com:禄劝| www.jkhly.com:齐齐哈尔市| www.aiyoudian.com:舟曲县| www.cxgcpj.com:兰溪市| www.pobohn.com:奉节县| www.dianehamburg.com:沾益县| www.0735qy.com:岳普湖县| www.snmp-thermometer.com:石楼县| www.cn733.com:武乡县| www.netcnz.com:红桥区|