第一种:父元素宽高不确定,元素垂直水平居中 table table-cell
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平垂直居中</title> </head> <style> *{margin: 0;padding: 0;} html,body{ height: 100%; } #wrap{ display: table; width: 100%; height: 100%; } #content{ display: table-cell; vertical-align: middle; background-color:#FFCCFF; width:760px; } #insert{ text-align: center; height: 200px; } #in{ display: inline-block; width: 200px; height: 200px; background: cyan; line-height: 200px; text-align: center; } </style> <body> <div id="wrap"> <div id="content"> <div id="insert"> <div id="in">中</div> </div> </div> </div> </body> </html> |
第二种:用定位的垂直水平居中
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平垂直居中</title> </head> <style> #in{ position: absolute; left: 0; top:0; bottom: 0; right: 0; margin: auto; width: 200px; height: 200px; background: cyan; line-height: 200px; text-align: center; } </style> <body> <div id="in">中</div> </body> </html> |
第三种:父元素子元素宽高确定了的水平垂直居中 box-sizing:border-box; padding挤到水中垂直居中即可
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平垂直居中</title> </head> <style scoped> *{margin: 0;padding: 0;} html,body{ height: 100%; } #box{ width: 600px; height: 600px; border: 1px solid #000; box-sizing: border-box; padding: 200px; } #in{ margin:0 auto; width: 200px; height: 200px; background: cyan; line-height: 200px; text-align: center; } </style> <body> <div id="box"> <div id="in">中</div> </div> </body> </html> |
第四种:和第三种相似,只是没有用盒模型了 算好margin的值 就margin : 值 auto;即可
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平垂直居中</title> </head> <style scoped> *{margin: 0;padding: 0;} html,body{ height: 100%; } #box{ width: 600px; height: 600px; border: 1px solid #000; } #in{ margin:200px auto; width: 200px; height: 200px; background: cyan; line-height: 200px; text-align: center; } </style> <body> <div id="box"> <div id="in">中</div> </div> </body> </html> |
第五种:伸缩盒子
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<html lang="en"> <head> <meta charset="UTF-8"> <title>水平垂直居中</title> </head> <style type="text/css"> html,body{ height: 100%; } body{ margin: 0; } .container{ height:100%; display: flex; justify-content: center; align-items: center; text-align:center; background: #ccc; } #box{ width: 100px; height: 100px; background: orange; text-align: center; line-height: 100px; } </style> <body> <div class="container"> <div id="box">中</div> </div> </body> </html> |
第六种：tanslate（）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直居中</title> </head> <style> html{ height: 100%; } body{ margin: 0;padding: 0; position: relative; height: 100%; } #child{ width: 100px; height: 100px; background: red; position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); } </style> <body> <div id="child"></div> </body> </html> |
番外篇:布局 之 三列-两边固宽-中间自适应
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三列-两边固宽-中间自适应</title> </head> <style> html, body{ height: 100%; position: relative; } body{ margin:0; padding: 0; } .a,.c{ width: 100px; height: 100%; background: pink; position: absolute; } .c{ right: 0; } .b{ position: absolute; left: 100px; height: 100%; background: cyan; width:calc(100% - 200px); } </style> <body> <div class="a"></div> <div class="b"></div> <div class="c"></div> </body> </html> |
布局之 5列-两边固宽-中间3列自适应
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>5列-两边固宽-中间3列自适应</title> </head> <style> html, body{ height: 100%; position: relative; } body{ margin:0; padding: 0; } .a,.c{ width: 100px; height: 100%; background: pink; position: absolute; } .c{ right: 0; } .b{ position: absolute; left: 100px; height: 100%; background: cyan; width:calc(100% - 200px); } .d1,.d2,.d3{ width:calc(100%/3); height: 100%; float: left; } .d1{ background: #ffcf42; } .d2{ background: #21ffff; } .d3{ background: #5a2cb5; } </style> <body> <div class="a"></div> <div class="b"> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> </div> <div class="c"></div> </body> </html> |
布局之 一边固宽一边自适应
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>一边固宽一边自适应</title> </head> <style> html, body{ height: 100%; position: relative; } *{ margin:0; padding: 0; } .a{ width: 100%; height: 40px; background: red; } .b{ height: 100%; width: calc(100% - 100px); background: #5a2cb5; float: left; text-align: center; line-height: 40px; } .c{ height: 100%; width: 100px; background: yellow; float: right; text-align: center; line-height: 40px; } </style> <body> <div class="a"> <div class="b">自适应</div> <div class="c">固宽</div> </div> </body> </html> |
