CSS文本居中
1.单行文本居中
水平居中：text-align:center;
垂直居中：line-height:XXpx;/*line-height与该元素的height的值一致*/
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.box{width: 200px;height: 200px;background: skyblue;text-align: center;/*水平居中*/line-height: 200px;/*垂直居中 行高(line-height)需与该div的高度值(height)一致*/overflow: hidden;/*防止内容超出容器或产生自动换行*/}</style></head><body><div class="box">hello world!</div></body></html>
2.多行文本居中
父级元素高度不固定时：
可以通过设置padding来让文本看起来垂直居中。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.big{width: 330px;background: burlywood;padding: 30px 10px;}.small{}</style></head><body><div class="big"><div class="small">this is a small div.this is a small div.this is a small div.this is a small div.</div></div></body></html>
垂直居中与水平居中
1.水平居中显示：margin:0 auto
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.big{width: 200px;height: 200px;background: peru;}.small{width: 100px;height: 100px;background: skyblue;margin: 0 auto;/*水平居中*/}</style></head><body><div class="big"><div class="small">hello world!</div></div></body></html>
注意：要给居中的元素一个宽度，且该元素一定不能浮动，否者无效。
2.水平居中和垂直居中显示：绝对定位 position:absolute
方式1：
position：absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.big{width: 200px;height: 200px;background: peru;position: relative;/*relative、absolute、fixed*/}div.small{width: 100px;height: 100px;background: skyblue;position: absolute;top: 0; right: 0; bottom: 0; left: 0;margin: auto;}</style></head><body><div class="big"><div class="small">hello world!</div></div></body></html>
方式2：
position：absolute;
top: 50%;
left:50%;
margin-top:-(height/2)px; //值为高度的一半；
margin-left:-(width/2)px; //值为宽度的一半；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.big{width: 200px;height: 200px;background: peru;position: relative;/*relative、absolute、fixed*/}div.small{width: 100px;height: 100px;background: skyblue;position: absolute;top: 50%; left: 50%;margin-top: -50px; /*值为height的一半*/margin-left: -50px; /*值为width的一半*//*top与margin-top实现垂直居中left与margin-left实现水平居中*/}</style></head><body><div class="big"><div class="small">hello world!</div></div></body></html>
方式3：
position：absolute;
top: 50%;
left:50%;
transform:translate(-50%,-50%):
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.big{width: 200px;height: 200px;background: peru;position: relative;/*relative、absolute、fixed*/}div.small{width: 100px;height: 100px;background: skyblue;position: absolute;top: 50%; left: 50%;transform:translate(-50%,-50%);/* 通过设top:50%;transform:translateY(-50%);实现垂直居中通过设left:50%;transform:translateX(-50%);实现水平居中*/}</style></head><body><div class="big"><div class="small">hello world!</div></div></body></html>
注意：对于absolute定位的层总是相对于其最近的定义为absolute或relative或fixed的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative或fixed，则其将相对body进行定位。
3.水平居中和垂直居中显示：表格布局 display:table-cell
通过在其父级元素中添加样式：display: table-cell，可以把元素当作表格单元来显示，再添加vertical-align: middle，就使其子元素垂直居中,通过给子元素设置margin:0 auto 实现水平居中。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.big{width: 300px;height: 200px;background: burlywood;display: table-cell;vertical-align: middle; /*子元素垂直居中*/}p{width: 100px;height: 50px;background: skyblue;margin: 0 auto; /*自身相对于父级水平居中,只对块级元素或者行内元素设display:block起作用*/}</style></head><body> <div class="big"><p></p></div></body></html>
4.水平居中和垂直居中显示：弹性布局display:flex
通过在其父级元素中添加样式：
display: flex;
justify-content:center; //使子元素水平居中
align-items:center; //使子元素垂直居中
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">div{width: 200px;height: 100px;background: skyblue;display: flex;justify-content: center; /*水平居中*/ align-items: center; /*垂直居中*/}p{width:100px;height:50px;background: pink;}</style></head><body><div class="big"><p>子元素</p></div></body></html>
5.水平居中和垂直居中显示：display:box
通过在其父级元素中添加样式：
display: box;
display: -webkit-box;
-webkit-box-pack:center; /*实现水平居中*/
-webkit-box-align:center; /*实现垂直居中*/
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">div{width: 200px;height: 100px;background: skyblue;display: box;display: -webkit-box;-webkit-box-pack:center; /*实现水平居中*/-webkit-box-align:center; /*实现垂直居中*/}p{width:100px;height:50px;background: pink;}</style></head><body><div class="big"><p>子元素</p></div></body></html>
图片居中
水平居中：
在其父级元素添加样式text-align:center
垂直居中：
1.在其父级元素添加padding样式
2. 在图片<img>标签前面添加一个行内元素，如<b></b>
给<b>标签样式：height:100%;display:inline-block; vertical-align: middle;
给图片<img>标签添加样式：vertical-align: middle;
由于图片大小不能大于div层大小，因此最好给图片<img>标签设置max-width,max-height样式。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.box{width: 200px;height: 200px;background: skyblue;text-align: center;/*水平居中*/box-sizing: border-box;}b{height: 100%;display: inline-block;vertical-align: middle;}img{vertical-align: middle;max-width: 150px;max-height: 150px;}</style></head><body><div class="box"><b></b><img src="img/touxiang.jpg"/></div></body></html>
