<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>页面居中的几种写法</title> <style type="text/css"> *{margin: 0px; padding: 0px;} #info{width:80%; height: 800px; background-color: pink;} /* 第1种：*/ #info{margin: 0px auto;} /* 第2种：内边距，后面的width和overflow必须写*/ body{ padding: 0 10%; width: 100%; overflow: hidden; } /* 第3种：absolute和relative都可以 */ #info{ position: absolute; left: 10%; } /* 第4种：行内块级*/ body{ text-align: center; } #info{ display: inline-block; } 第5种：弹性盒子的主轴对齐*/ /*body{ display:flex; justify-content:center; } </style> </head> <body> <div id="info"></div> </body> </html>