父元素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>水平居中布局</title> <style> *{ margin: 0; padding: 0; } .parent { width: 100%; background: green; text-align: center; } .child { display: inline-block; width: 800px; height: 100px; background: blue; } </style> </head> <body> <p class="parent"> <p class="child">1</p> <p class="child">2</p> <p class="child">3</p> <p class="child">4</p> <p class="child">5</p> <p class="child">6</p> </p> </body> </html>
以上就是单列布局水平居中布局方法的详细内容。