상위 요소 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>E
단점: 너비를 지정해야 함
<!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>E
단점: 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>
단점: 하위 요소의 너비를 알아야 합니다.
<!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>
단점: 하위 요소의 너비를 알 필요가 없음
<!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>
<!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>
<!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%; 변환: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>
<!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>
<!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>
위 내용은 CSS 레이아웃 기술 요약 및 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!