网页元素居中攻略记_(6)图片水平垂直居中

最新推荐文章于 2021-04-13 11:11:04 发布

crper

最新推荐文章于 2021-04-13 11:11:04 发布

阅读量3.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：笔记-HTML4&amp;5/CSS2.1&amp;3 网页元素居中攻略记文章标签：图片图片垂直居中图片水平居中

本文链接：https://blog.youkuaiyun.com/crper/article/details/50965507

笔记-HTML4&5/CSS2.1&3 同时被 2 个专栏收录

29 篇文章

订阅专栏

网页元素居中攻略记

6 篇文章

订阅专栏

本文介绍了如何利用CSS特性实现图片在网页中的水平垂直居中，通过代码示例和实际效果展示，提供了一种简便的图片居中方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

借助table的特性来实现

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		.test{
			display:table;
			height:800px;
			width:800px;
			background:#99cc99;
			border-radius:5px;
			border:1px solid #f70;

		}
		.test>span{
			display:table-cell;
			vertical-align:middle;
			text-align:center;
		}
		.test>span>img{
			height:400px;
			width:400px;
			border-radius:50%;
			box-shadow:1px 1px 3px rgba(0,0,0,.5);
		}
	</style>
</head>
<body>
	<div class="test">
		<span><img src="http://d.hiphotos.baidu.com/image/h%3D200/sign=8663264274f082023292963f7bfbfb8a/f3d3572c11dfa9eca13b947665d0f703918fc1be.jpg" alt=""></span>
	</div>
</body>
</html>