方法：定位，外邊距，內邊距，層級，邊框； 一個元素； 兩個元素； 三個元素. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e ...
方法：定位，外邊距，內邊距，層級，邊框； 一個元素； 兩個元素； 三個元素. <!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="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> 方法4
<div class="father5"> <div class="son5"></div> </div> <!-- 前五種為兩個元素的居中方式 --> 方法5
<div class="six"></div> 方法6
<div class="seven"></div> <!-- 後兩種為1個元素的居中方式 --> 方法7
<div class="father8"> <div class="box1"></div> <div class="box2"></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個元素 定位+層級
