html文字和图片垂直居中,css如何让图片和文字垂直居中？

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

css设置图片和文字垂直居中的方法：

文本的垂直居中：

单行文本

只要height值等于line-height值就

#father{

width:300px;

height:200px;

background-color:skyblue;

line-height:200px;

}

#son{

background-color:green;

}

我是文本

效果如下：

height === line-height 无法使替换元素，如、、、…垂直居中，必须有、…类似行内标签配合才能使垂直居中生效！

多行文本

1：高度固定

关键属性：display:tabel-cell; vertical-align:middle;

div{

height:200px;

width:300px;

vertical-align:middle;

display:table-cell;

word-break:break-all;

background:skyblue;

}

红豆生南国，春来发几支。愿君多采撷，此物最相思。

效果如下：

2：父级高度固定，嵌套行内元素

关键属性：父级:diaplay:tabel; 子集：display:tabel-cell; vertical-align:middle;

div{

height:200px;

width:300px;

display:table;

word-break:break-all;

background:skyblue;

}

span{

display:table-cell;

vertical-align:middle;

}

红豆生南国，春来发几支。愿君多采撷，此物最相思。

效果如下：

3：父级高度固定，嵌套块级元素且该元素高确定

关键属性：定位 + margin-top：负值；

*{

margin:0;

padding:0;

}

div{

height:200px;

width:300px;

position:relative;

word-break:break-all;

background:skyblue;

}

p{

position:absolute;

top:50%;

left:0;

height:80px;

margin-top:-40px;

background:red;

}

红豆生南国，春来发几支。愿君多采撷，此物最相思。

效果如下：

二、图片垂直居中水平居中：

1、img父级display:table-cell; vertical:middle; height:xxx; (推荐)

div{

display: table-cell;

width:300px;

height:200px;

vertical-align: middle;

/*text-align:去掉则垂直不水平*/

text-align:center;

background:skyblue; /*table-cell 可以使替换元素垂直居中，强大！*/

}

img{

width:100px;

height:100px;

}

效果如下：

2、定位 + margin：auto；

div{

position:relative;

width:400px;

height:300px;

text-align:center;

background:#999;

}

img{

position:absolute;

top:0;bottom:0;

left:0;right:0;

margin:auto;

}