1.text-align + inline-block
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>水平居中</title> <link rel="stylesheet" type="text/css" href="demo.css"> <style type="text/css"> body{margin:20px;} .parent{ text-align: center; } .child{ display: inline-block; } </style> </head> <body> <div class="parent"> <div class="child">DEMO</div> </div> </body> </html>
2.display: table + margin: 0 auto
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>水平居中</title> <link rel="stylesheet" type="text/css" href="demo.css"> <style type="text/css"> body{margin:20px;} .child{ display: table; margin: 0 auto; } </style> </head> <body> <div class="parent"> <div class="child">DEMO</div> </div> </body> </html>
3.position + transform
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>水平居中</title> <link rel="stylesheet" type="text/css" href="demo.css"> <style type="text/css"> body{margin:20px;} .parent{height:1.5em;} .parent{ position: relative; } .child{ position: absolute; left: 50%; transform: translateX(-50%); } </style> </head> <body> <div class="parent"> <div class="child">DEMO</div> </div> </body> </html>
4.display: flex + justify-content: center（或子元素+margin: 0 auto）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>水平居中</title> <link rel="stylesheet" type="text/css" href="demo.css"> <style type="text/css"> body{margin:20px;} .parent{ display: flex; justify-content: center; } .child{ margin: 0 auto; } </style> </head> <body> <div class="parent"> <div class="child">DEMO</div> </div> </body> </html>
附录：demo.css
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;} header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;} table{border-collapse:collapse;border-spacing:0;} caption,th{text-align:left;font-weight:normal;} html,body,fieldset,img,iframe,abbr{border:0;} i,cite,em,var,address,dfn{font-style:normal;} [hidefocus],summary{outline:0;} li{list-style:none;} h1,h2,h3,h4,h5,h6,small{font-size:100%;} sup,sub{font-size:83%;} pre,code,kbd,samp{font-family:inherit;} q:before,q:after{content:none;} textarea{overflow:auto;resize:none;} label,summary{cursor:default;} a,button{cursor:pointer;} h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:normal;} del,ins,u,s,a,a:hover{text-decoration:none;} body,textarea,input,button,select,keygen,legend{font:30px/1.5 'microsoft yahei';color:#333;outline:0;} body{background:#fff;} a,a:hover{color:#333;} .parent{background:#ddd;} .child{background:#666;color:#fff;}