HTML&CSS-盒模型运用居中方式合集 _生活百科

方法：定位，外边距，内边距，层级，边框；一个元素；两个元素；三个元素.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://www.huyubaike.com/biancheng/index.css"></head><body> <div class="father1"> <div class="son1"></div> </div>方法1
<div class="father2"> <div class="son2"></div> </div>方法2
<div class="father3"> <div class="son3"></div> </div>方法3
<div class="father4"> <div class="son4"></div> </div>【HTML&CSS-盒模型运用居中方式合集】方法4
<div class="father5"> <div class="son5"></div> </div> 方法5
<div class="six"></div>方法6
<div class="seven"></div> 方法7
<div class="father8"> <div class="box1"></div> <div class="box2"></div> </div></div> </div> 方法8</body></html> * { margin: 0; padding: 0; list-style: none;}清除浏览器默认样式.father1 { width: 400px; height: 400px; background-color: #fc4; position: relative;}.son1 { width: 200px; height: 200px; background-color: #f44; position: absolute; top: 100px; left: 100px;}/* 第一种居中方式 */定位.father2 { width: 200px; height: 200px; background-color: #f77; position: relative;}.son2 { width: 100px; height: 100px; background-color: #ff7; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px;}/* 第二种居中方式 */定位+外边距+百分比.father3 { width: 200px; height: 200px; background-color: #0f0; position: relative; /* overflow: hidden; */ /* 解决margin塌陷问题 */}.son3 { width: 100px; height: 100px; background-color: #77f; position: absolute; margin-left: 50px; margin-top: 50px;}/* 第三种居中方式 */定位+外边距.father4 { width: 100px; height: 100px; padding: 50px; background-color: #f44;}.son4 { width: 100px; height: 100px; background-color: #0f7;}/* 第四种居中方式 */内边距.father5 { width: 100px; height: 100px; border: 50px solid #f444; background-color: #f444;}.son5 { width: 100px; height: 100px; background-color: #4fff;}/* 第五种居中方式 */边框.six { width: 200px; height: 200px; background-color: #f9f67f; border: 100px solid #08c;}/* 第六种居中方式 */一个元素边框.seven { width: 0px; height: 0px; padding: 100px; background-color: #f78; border: 50px solid #99f4;}/* 第七种居中方式 */一个元素边框+内边距.box1 { width: 200px; height: 200px; background-color: #f075; position: absolute; z-index: 1;}.box2 { width: 100px; height: 100px; background-color: #ff99; position: absolute; z-index: 2; top: 50px; left: 50px;}.father8 { position: relative;}/* 第八种居中方式 */3个元素定位+层级

HTML&CSS-盒模型运用居中方式合集

推荐阅读

教你如何使用迅雷离线下载[新发布]

忙碌了多少天辛苦了多少年是啥歌快去听一下吧

五岳奇险天下第一山是哪座山天下第一山是哪座山

一斤几克重，一斤等于多少千克

煤炭公司起名大全免费煤炭行业起名大全

梦见水里有黑鱼在游

瑜伽入门动作图解瑜伽入门动作图解上

如何通过女人面相看婚姻哪些面相的女人婚姻好

喝番茄汁有什么好处番茄汁的好处有哪些

etc不抬杆可以倒回吗 etc不抬杆可以倒回会被扣分吗

“八岐之术”是什么？

节日由来英语节日由来

孕妇梦见和别人吵架孕妇梦见别人挣了很多钱

在“再见阿郎”中的刘金虎怎么又是金鹏？

皮蛋是生的还是熟的怎么判断皮蛋是生的还是熟的

我们好像在哪见过歌词我们好像在哪见过歌词歌谱

梦见和当官的同学在一起商人梦见当官的同学

关于洛阳昊远机械设备有限公司简述洛阳昊远机械设备有限公司

天麻能泡白酒吗天麻可以和虫草花一起煲汤吗

商业承兑汇票是什么意思商业承兑汇票的理解

HTML&amp;CSS-盒模型运用居中方式合集

推荐阅读

HTML&CSS-盒模型运用居中方式合集