23.元素水平垂直居中 · 程序员开发笔记

1：元素有固定的宽高 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #hd{ width: 400px; height: 260px; background: mediumpurple; /*margin: 100px auto;*/ /*如果元素有固定的宽高*/ position: fixed; left: 0; top: 0; bottom: 0; right: 0; margin: auto; } </style> </head> <body> <div id="hd"></div> </body> </html> 2：元素有固定的宽高 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #hd{ width: 400px; height: 260px; background: mediumpurple; /*margin: 100px auto;*/ /*如果元素有固定的宽高*/ position: fixed; left: 50%; top: 50%; margin-left: -200px; margin-top: -130px; } </style> </head> <body> <div id="hd"></div> </body> </html> 3:元素没有固定的宽高 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #hd{ width: 400px; background: mediumpurple; /*如果元素没有固定的宽高*/ position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); } </style> </head> <body> <div id="hd">后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾后盾人人人做后盾</div> </body> </html>