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>