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>