Question

我有一个html页面，我想在页面中间叠加图像，就像在一张纸上贴一个标记。图像具有透明背景。我知道我可以使用绝对定位，但是有没有办法使用css中心呢？

Answer 1

要使图像居中，您可以这样做：

#watermark{
    display:block;
    margin:auto; //That will center it on all side
}

如果你只想水平居中：

#watermark{
   display:block;
   margin-left:auto;
   margin-right:auto;
}

Answer 2

HTML

<div id="watermark">
<p>This is the test version.</p>
</div>

<强> CSS

#watermark {
  color: #d0d0d0;
  font-size: 200pt;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: -1;
  left:-100px;
  top:-200px;
}

小提琴 Demo

Answer 3

html：

<img src="image.png" class="center" />

的CSS：

.center
{
    position:absolute;
    left:50%;
    top:50%;
    width:220px; // image width
    height:40px; // image height
    margin-top: -20px; // -(height/2)
    margin-left: -110px; // -(width/2)
}

示例：http://jsfiddle.net/Bm5tA/

将图像居中在html页面上

3 个答案: