关于用css实现文本和图片垂直水平居中
一直相信好记性不如烂笔头,最近遇到很多用到垂直居中的,整理一下以便日后查阅。
一、文本垂直水平居中
1、水平居中:
文字水平居中没什么好说的,用text-align: center;即可很容易的实现。
2、垂直居中:
1)简单的单行文本
利用line-height==height,使得单行文本垂直居中。
1 2 3 4 5 6 | 1 p{
2 width: 200px;
3 height: 200px
4 text-align: center;
5 line-height: 200px;
6 background:#1AFF00;7 }
|
Salin selepas log masuk
简单点来说,用p标签就可以,就像这样
1 2 3 4 5 6 7 | 1 p{
2 width: 200px;
3 height: 200px;
4 text-align: center;
5 line-height: 200px;
6 background:#00ABFF;7
}
|
Salin selepas log masuk
效果如下:
2)多行文本
利用表格元素的特性,块级父元素display: table;内联元素display: table-cell;vertical-align: middle;
(内联)
1 2 3 | 1 <p
2 <span>国际《儿童权利公约》界定的儿童系指18岁以下的任何人</span>
3 </p>
|
Salin selepas log masuk
1 2 3 4 5 6 7 8 9 | 1 p{
2 width: 200px;
3 height: 200px;
4 display: table;
5 background:#1AFF00;
6 }
7 span{
8 display: table-cell;
9 vertical-align: middle;10 }
|
Salin selepas log masuk
(块级)
1 2 3 | 1 <p>
2 <p>国际《儿童权利公约》界定的儿童系指18岁以下的任何人</p>
3 </p>
|
Salin selepas log masuk
定位+transform: translateY(-50%);
1 2 3 4 5 6 7 8 9 10 11 12 13 | 1 p{
2 position: relative;
3 width: 200px;
4 height: 200px;
5 background: #00ABFF;
6 }
7 p{
8 position: absolute;
9 top: 50%;
10 left: 0;
11 width: 200px;
12 height: 64px;
13 transform: translateY(-50%);14 }
|
Salin selepas log masuk
定位+margin负值
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 1 p{
2 position: relative;
3 width: 200px;
4 height: 200px;
5 background:#1AFF00;
6 }
7 p{
8 position: absolute;
9 top: 50%;
10 left: 0;
11 width: 200px;
12 height: 64px;
13 margin-top: -32px;
14 }
|
Salin selepas log masuk
定位+margin: auto;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 1 p{
2 position: relative;
3 width: 200px;
4 height: 200px;
5 background:#00ABFF;
6 }
7 p{
8 position: absolute;
9 top: 0;
10 left: 0;
11 right: 0;
12 bottom: 0;
13 margin: auto;
14 width: 200px;
15 height: 64px;
16 }
|
Salin selepas log masuk
两者都是定宽定高,父元素用padding值,此值为父元素高度减去子元素高度的一半
1 2 3 4 5 6 7 8 9 10 | 1 p{
2 width: 200px;
3 height: 64px;
4 padding: 68px 0;
5 background:#1AFF00;
6 }
7 p{
8 width: 200px;
9 height: 64px;
10 }
|
Salin selepas log masuk
两者都是定宽定高,父元素用overflow: hidden;(css hack)子元素用margin值,此值为父元素高度减去子元素高度的一半
1 2 3 4 5 6 7 8 9 10 11 | p{
width: 200px;
height: 200px;
overflow: hidden;
background:#00ABFF;
}
p{
width: 200px;
height: 64px;
margin:68px auto;
}
|
Salin selepas log masuk
效果如下:

二、图片垂直水平居中
1、水平居中
1)img在css初始设置中是inline-block,行内块元素,此时若是要水平居中用text-align:center;
2)给img元素设置display:block;转换为块级元素,要想水平居中用margin:0 auto;
2、垂直居中
1.jpg
用这张图片做示范
1 2 3 | 1 <p>
2 <img alt= "" src= "1.jpg" />
3 </p>
|
Salin selepas log masuk
line-height==height vertical-align: middle;
1 2 3 4 5 6 7 8 9 10 | p{
width: 198px;
height: 198px;
text-align: center;
line-height: 198px;
border: 1px solid #8900FF;
}
img{
vertical-align: middle;
}
|
Salin selepas log masuk
display: table-cell;vertical-align: middle;
1 2 3 4 5 6 7 8 9 10 11 | p{
display: table-cell;
vertical-align: middle;
width: 198px;
height: 198px;
border: 1px solid #8900FF;
}
img{
display: block;
margin: 0 auto;
}
|
Salin selepas log masuk
display: table-cell;vertical-align: middle; text-align: center;
1 2 3 4 5 6 7 8 | p{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 198px;
height: 198px;
border: 1px solid #8900FF;
}
|
Salin selepas log masuk
定位+display: block;transform: translate(-50%,-50%);
1 2 3 4 5 6 7 8 9 10 11 12 13 | p{
position: relative;
width: 198px;
height: 198px;
border: 1px solid #8900FF;
}
img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: block;
}
|
Salin selepas log masuk
定位+margin负值
1 2 3 4 5 6 7 8 9 10 11 12 | p{
position: relative;
width: 198px;
height: 198px;
border: 1px solid #8900FF;
}
img{
position: absolute;
top: 50%;
left: 50%;
margin: -75px 0 0 -75px;
}
|
Salin selepas log masuk
定位+margin: auto;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | p{
position: relative;
width: 198px;
height: 198px;
border: 1px solid #8900FF;
}
img{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
display: block;
}
|
Salin selepas log masuk
overflow: hidden;margin值
1 2 3 4 5 6 7 8 | p{
width: 198px;
height: 198px;
overflow: hidden;
border: 1px solid #8900FF;
}
img{ 8 margin: 25px;
}
|
Salin selepas log masuk
padding值
1 2 3 4 5 6 | p{
2 padding: 25px;
3 width: 148px;
4 height: 148px;
5 border: 1px solid #8900FF;
6 }
|
Salin selepas log masuk
用table的属性+vertical-align: middle;实现
1 | 1 <p>2 <span><img alt= "" src= "1.jpg" /></span>3 </p>
|
Salin selepas log masuk
1 2 3 4 5 6 7 8 9 10 11 | p{
display: table;
width: 198px;
height: 198px;
text-align: center;
border: 1px solid #8900FF;
}
span{
display:table-cell;
vertical-align: middle;
}
|
Salin selepas log masuk
用background实现
1 2 3 4 5 6 | 1 p{
2 width: 198px;
3 height: 198px;
4 border: 1px dashed #8900FF;
5 background: url(1.jpg) no-repeat center center;
6 }
|
Salin selepas log masuk
效果如下:

原文来自:http://www.cnblogs.com/Ni-F/p/6937931.html 感谢作者分享!
Atas ialah kandungan terperinci 关于用css实现文本和图片垂直水平居中. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!