首页 网站建设 正文
DIV内图片水平垂直居中的CSS样式

 2014-07-12    496  

偶尔有网页内图片水平垂直居中的需求，这篇文章主要介绍下在DIV内图片水平垂直居中的CSS样式，示例代码如下：

HTML代码部分：

<html>

<head>

<meta charset=utf-8" />

<title>图片的水平垂直居中</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="work"><img src="test.png" alt="我的图片"></div>

</body>

</html>

CSS代码部分：

div{

width:200px;

height:200px;

border:10px solid #6F0;

margin:auto

}

.work {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

实现的方法很多，只是这种方式比较常用，父子元素都不确定宽高的情况也适用。

仅以此记录一下，方便后续查找使用。




发表评论：

上一篇>>在win8.1 update1下该如何来正确更新安装补丁

=========================================

下一篇>>撑一把伞，为自己挡住风雨

推荐文章
热门文章

Copyright © 2012-2024  菜鸟之家站内搜索