方法：定位，外邊距，內邊距，層級，邊框； 一個元素； 兩個元素； 三個元素. <!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.cnblogs.com/566adsasdw55/p/index.css"> </head> <body> <div > <div ></div> </div> 方法1
<div > <div ></div> </div> 方法2
<div > <div ></div> </div> 方法3
<div > <div ></div> </div> 方法4
<div > <div ></div> </div> <!-- 前五種為兩個元素的居中方式 --> 方法5
<div ></div> 方法6
<div ></div> <!-- 后兩種為1個元素的居中方式 --> 方法7
<div > <div ></div> <div ></div> </div> </div> </div> <!-- 最后一種為3個元素的居中方式 --> 方法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個元素 定位+層級
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/509789.html
標籤：Html/Css
上一篇：D3 筆記