行内元素水平居中
把行内元素包裹在块级父元素中，且父元素中的css设置text-align:center;
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>css水平垂直居中</title> <style> body{background:#000;} #container{ background: #ccc; text-align: center; } </style> </head> <body> <div id="container">行内元素水平居中</div> </body> </html>
块状元素水平居中
将块状元素的左右外边距设置为auto即可。
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>块状元素水平居中</title> <style> body{background:#000;} #container{ background: #ccc; } #box1{ width:300px; height:300px; background:#fff; margin: 0 auto; text-align: center; } </style> </head> <body> <div id="container"> <div id="box1">块状元素水平居中</div> </div> </body> </html>
多个块状元素水平居中的情况：
1、传统方法：将水平排列的块状元素设置为：display：inline-block；然后父元素设置为text-align:center;即可。
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>多个块状元素水平居中</title> <style> body{background:#000;} #container{ background: #ccc; text-align: center; } .box1{ width:300px; height:300px; background:#fff; display: inline-block; } </style> </head> <body> <div id="container"> <div class="box1">块状元素水平居中</div> <div class="box1">块状元素水平居中</div> <div class="box1">块状元素水平居中</div> </div> </body> </html>
2、使用弹性盒子：将父元素设置为display：-webkit-box；-webkit-box-pack：justify（或center）；注意兼容性
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>多个块状元素水平居中</title> <style> body{background:#000;} #container{ background: #ccc; display: -webkit-box; -webkit-box-pack:justify;/*box-pack决定了父元素水平空间的使用*/ } .box1{ width:300px; height:300px; background:#fff; } </style> </head> <body> <div id="container"> <div class="box1">块状元素水平居中</div> <div class="box1">块状元素水平居中</div> <div class="box1">块状元素水平居中</div> </div> </body> </html>
已知元素宽高水平垂直居中
1、绝对定位与margin
这个方法使用了position:absolute;有固定宽高的div，被设置为top：0；bottom:0;因为它有固定高度，不能与上下的间距都为0，margin：auto；会使它居中。
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>多个块状元素水平居中</title> <style> body{background:#000;} #container{ background: #ccc; position: relative; width:1000px; height:500px; } .box1{ position: absolute; background:#fff; width: 300px; height: 300px; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } </style> </head> <body> <div id="container"> <div class="box1">已知元素宽高水平垂直居中</div> </div> </body> </html>
2、绝对定位与margin负值
利用绝对定位，将元素的top、left值设为50%，然后设置外边距margin-left：width/2；margin-top:height/2；实现垂直居中效果
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>多个块状元素水平居中</title> <style> body{background:#000;} #container{ background: #ccc; position: relative; width:1000px; height:500px; } .box1{ position: absolute; background:#fff; width: 300px; height: 300px; top: 50%; left: 50%; margin-left:-150px; margin-top:-150px; } </style> </head> <body> <div id="container"> <div class="box1">已知元素宽高水平垂直居中</div> </div> </body> </html>
未知元素宽高水平垂直居中
1、把div的显示方式设置为表格，使用表格的vertical-align属性
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>未知宽高的元素水平垂直居中</title> <style> body{background: #000;font-size: 24px;} #wrapper{ display: table; background: #ccc; width: 1000px; height:300px; } #cell{ display: table-cell; text-align: center; vertical-align: middle; } </style> </head> <body> <div id="wrapper"> <div id="cell"> <div class="content">未知宽高的元素水平垂直居中</div> </div> </div> </body> </html>
2、跟上面提到的多个块状元素水平居中的用法差不多，这里用到弹性盒子是要注意浏览器的兼容性；（这里被居中元素的宽度由其里面的内容决定）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>未知宽高的元素水平垂直居中</title> <style> body{background: #000;font-size: 24px;} #container{ margin:30px auto; background: #ccc; width: 1000px; height:300px; display: -webkit-box; -webkit-box-pack:center; } #container .box1{ background: red; } #container .box2{ background: green; } #container .box3{ background: yellow; } </style> </head> <body> <div id="container"> <div class="box1">未知宽高的元素水平垂直居中</div> <div class="box2">未知宽高的元素水平垂直居中</div> <div class="box3">未知宽高的元素水平垂直居中</div> </div> </body> </html>
