html 大尺寸图片居中,CSS居中实例之大小不固定的图片居中方法

本文介绍了CSS居中实例之大小不固定的图片居中方法，分享给大家，具体如下：

1.利用table-cell实现垂直居中

[站外图片上传中……(5)]

div{

width: 500px;

height: 500px;

background: #ccc;

}

.box1{

text-align:center;

display: table-cell;

vertical-align: middle;

/* font-size: 118px; */

}

img{

vertical-align: middle;

}

利用父元素为display:table-cell类型实现垂直居中，table在ie8+的浏览器中自带的垂直居中的属性。

注意：img{vertical-align: middle;}只是为了消除display:inline-block类型的基线对齐问题。

2.多行文本的垂直居中方法

有时可能我们会遇到需要多行文本垂直居中的一些情况，但是做起来有时有些麻烦，需要我们换个思路去实现。

你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据

div{

width: 500px;

height: 500px;

background: #ccc;

}

.box3{

display: table-cell;

vertical-align: middle;

}

span{

display: inline-block;

vertical-align: middle;

}

将内部的文本用span标签(其他标签也可以)包裹起来，把span标签设为inline-block,然后当图片的垂直居中处理(ie8+)。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。