css实现元素在div里居中

时间：2024-02-17 16:36:55

用一个之前没见过的方法实现一张图片的居中.

先铺html代码

<div class="container">
    <div class="img"></div>
</div>

为了方便看的清楚, 我给后面的container设置一些颜色和宽高

.container{
  position: absolute;
  height: 300px;
  width: 500px;
  background-color: #f6f6f6;
  border: 1px solid #000;
}

然后开始设置需要居中元素的css

方法:

1. 首先设置它的样式, 使他绝对定位来将他放置到容器元素的左上角
.img{
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: #0084b4;
}

2. 然后设置top和left, 使元素向下和向右偏移其容器高度和宽度的50%
.img{
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: #0084b4;
  top: 50%;
  left:50%;
}

3. 再设置元素的负外边距

在样式表中, 负外边距会将图片向上向左移动其图片本身高度和宽度的一半

.img{
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: #0084b4;
  margin-left: -50px;
  margin-top: -50px;
  top: 50%;
  left:50%;
}

或者用jQuery的方法实现

$(\'.img\').css({
  marginLeft: - ($(\'.img\').width()/2),
  marginTop: - ($(\'.img\').height()/2)
  
})

如果img元素的width和heigh与容器元素的width和heigh相等, 则img元素就正好完全覆盖在容器元素上了.

相关文章