一、元素的水平居中
⑴.行内元素的水平居中：text-align
⑵.块级元素的水平居中：margin：0 auto
二、元素的垂直居中
⑴.行内元素垂直居中：
line-height设置为与父级元素的高度一样
⑵.、块级元素垂直居中：
1.可以给父级使用相对定位，子级使用绝对定位，将top、left、right、bottom为0
a.给父级相对定位，子级绝对定位：left：50%；top：50%；margin-left：-子级元素宽度一半；margin-top：-子级元素高度一半
b.给父级相对定位，子级绝对定位 height:百分比x; x属于0~100% margin：auto;
eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直居中</title> <style type="text/css"> /*IE版本低于7时不能正常使用*/ .outer{ height: 200px; position: relative; background: #bfe; } .outer .inner{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50%; height: 30%; margin: auto; background: coral; } </style> </head> <body> <div class="outer"> <div class="inner">inner content</div> </div> </body> </html>
c.给父级和子级都加绝对定位，再给子级添加top：calc（50% - 子级元素高度一半）、left：calc（50% - 子级元素宽度一半）
d.给父级一个display：flex； align-items：center；再给子级添加：margin：0 auto;(使用弹性布局垂直轴居中)
⑶.样式表格方式：【CSS Table Method】(父元素与子元素等高等宽；父元素背景颜色无效；二者为行内块级元素)
eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直居中</title> <style type="text/css"> .outer{ height: 200px; display: table; /*background: #bfe; 该背景会被子元素覆盖不会显示出来*/ } .outer .inner{ display: table-cell; vertical-align:middle; background: coral; /*若为版本较低的ie6使用下面样式*/ display: inline-block; } </style> </head> <body> <div class="outer"> <div class="inner">inner content</div> </div> </body> </html>
⑷.图片在div中垂直居中：
eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直居中</title> <style type="text/css"> .outer{ height: 200px; display: table-cell; vertical-align: middle; background: #bfe; } .outer .inner{ background: coral; } </style> </head> <body> <div class="outer"> <div class="inner">inner content</div> </div> </body> </html>
⑸.借用兄弟元素float-div来设置：
eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Floater Div</title> <style type="text/css"> .outer{ height: 200px; background: #bfe; } .floater{ float: left; height: 50%; width: 100%; margin-bottom: -50px; /*background: teal;*/ } .inner{ clear: both; height: 100px; background: coral; } </style> </head> <body> <div class="outer"> <div class="floater"></div> <div class="inner"></div> </div> </body> </html>