單列布局
水平置中
父元素text-align:center;子項目:inline-block;
優點:相容性好;
不足:需要同時設定子項目和父元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>水平置中1</title><style> .parent { width: 500px; height: 400px; background: red; text-align: center; } .child { display: inline-block; width: 300px; height: 100px; background: blue; }</style></head><body><p class="parent"> <p class="child"></p></p></body></html>
子項目margin:0 auto;
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>水平置中1</title> <style> .parent { width: 500px; height: 400px; background: red; } .child { width: 300px; height: 100px; background: blue; margin:0 auto; } </style></head><body> <p class="parent"> <p class="child"></p> </p></body></html>
子項目{display:table;margin:0 auto;}
優點:只需要對自身進行設定
不足:IE6,7需要調整結構
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>水平置中1</title> <style> .parent { width: 500px; height: 400px; background: red; } .child { width: 300px; height: 100px; background: blue; margin:0 auto; display:table;margin:0 auto;s } </style></head><body> <p class="parent"> <p class="child"></p> </p></body></html>
父元素:relative;子項目:absolute;left:50%;margin-left:-寬度的一半
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>水平置中1</title> <style> .parent { width: 500px; height: 400px; background: red; position: relative; top: 0; left: 0; } .child { width: 300px; height: 100px; background: blue; position: absolute; top: 0; left: 50%; margin-left: -150px; } </style></head><body> <p class="parent"> <p class="child"></p> </p></body></html>
父元素:relative;子項目:absolute;left:50%;transform:translate(-50%,0);
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>水平置中1</title> <style> .parent { width: 500px; height: 400px; background: red; position: relative; top: 0; left: 0; } .child { width: 300px; height: 100px; background: blue; position: absolute; top: 0; left: 50%; transform: translate(-50%,0); } </style></head><body> <p class="parent"> <p class="child"></p> </p></body></html>
彈性盒子:父元素:display:flex;justify-content:center;
優點:簡單
缺點:相容性差
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>水平置中1</title><style> .parent { width: 500px; height: 400px; background: red; display: flex; justify-content: center; } .child { width: 300px; height: 100px; background: blue; }</style></head><body><p class="parent"> <p class="child"></p></p></body></html>
垂直置中
vertical-align:center;
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>水平置中1</title> <style> .parent { width: 500px; height: 400px; background: red; display:table-cell; vertical-align:middle; } .child { width: 300px; height: 100px; background: blue; } </style></head><body> <p class="parent"> <p class="child"></p> </p></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>垂直置中1</title> <style> .parent { width: 500px; height: 400px; background: red; vertical-align:middle; line-height:450px; } .child { width: 300px; height: 100px; background: blue; display:inline-block; } </style></head><body> <p class="parent"> <p class="child"></p> </p></body></html><!-- 這種方法需要知道父元素和子項目的高度,父元素的line-height的值為父元素高度減去子項目高度的一半。-->
父元素:position:relative;子項目:positon:absolute;top:50%;transform:translate(0,-50%);
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>垂直置中1</title> <style> .parent { width: 500px; height: 400px; background: red; position: relative; top: 0; left: 0; } .child { width: 300px; height: 100px; background: blue; position: absolute; top: 50%; left:0; transform: translate(0,-50%); } </style></head><body> <p class="parent"> <p class="child"></p> </p></body></html>
父元素:position:relative;子項目:positon:absolute;top:50%;margin-top:-子項目高度的一半;
父元素:display:flex;align-items:center;
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>垂直置中1</title> <style> .parent { width: 500px; height: 400px; background: red; display: flex; align-items: center; } .child { width: 300px; height: 100px; background: blue; } </style></head><body> <p class="parent"> <p class="child"></p> </p></body></html>
水平垂直置中
父元素:display:table-cell;vertical-align:middle;text-align:center;
子項目;display:inline-block;
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>垂直置中1</title> <style> .parent { width: 500px; height: 400px; background: red; display:table-cell; vertical-align:middle; text-align:center; } .child { width: 300px; height: 100px; background: blue; display: inline-block; } </style></head><body> <p class="parent"> <p class="child"></p> </p></body></html>
父元素:position:relative;
子項目:position:absolute