图片水平垂直居中对齐的四种做法_前端技术_日志_DTOP

图片水平垂直居中对齐的四种做法

来源：本站原创发布时间：2017-09-30 23:21:21 浏览次数：次【字体：小大】

以下的做法中假定外层的高度和宽度已经固定。通用HTML和CSS代码：

.img {
	width:300px;
	height:300px;
	margin:20px auto;
	background:#00f;
}

1.相对定位+margin:auto

利用图片相对于外层浮动，加上margin:auto.

.img1 {
	position:relative;
}
.img1 img {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}

2.flexbox

利用flexbox里面的垂直居中属性：align-items:center(垂直居中)和justify-content:center(水平居中);

.img2 {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex-box;
	display:flex;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	text-align:center;
}

3.table-cell

利用display:table-cell+图片vertical-align:middle

.img3 .icenter {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	height:300px;
	width:300px
}
.img3 img {
	vertical-align:middle;
	display:inline-block
}

4.增加一个空白标签

兼容性较好，支持IE浏览器

.img4 {
	text-align:center
}
.img4 img {
	vertical-align:middle
}
.img4 .iblock {
	display:inline-block;
	height:100%;
	width:0;
	vertical-align:middle
}

前端技术

图片水平垂直居中对齐的四种做法

用户登录

还没有账号？