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>
1150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
