HTML：

Question

有没有什么方法可以在div中完美地设置一个标签，无论div的宽度和高度是多少？换句话说，我想在div标签内设置一个像中心背景的图像位置。例如：

.image-wrap {
  width: 50vw;
  height: 720px;
  background: url('some-images.jpg') no-repeat center center / auto 100%;
}

我想在div中设置一个图像，如上面的背景，自动宽度和100％高度，这样图像中的所有重要内容都将位于div的中心。

<div class="image-wrap">
  <img src="some-images.jpg" alt="some image here"/>
</div>

非常感谢！

Answer 1

您可以使用flex属性轻松居中。演示here

.image-wrap {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;

  border: dotted 1px #CCC;
}

<div class="image-wrap">
  <img src="http://lorempixel.com/400/200" alt="some image here"/>
</div>

Answer 2

你可以这样做：

＆＃13;

.image-wrap {
  width: 50vw;
  height: 720px;
  background: url('some-images.jpg') no-repeat center center / auto 100%;
  position: relative;
}
img
{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px; /* (EXAMPLE) - value should be half of the image width */
  margin-top: -100px; /* (EXAMPLE) - value should be half of the image height */
}

＆＃13;

<div class="image-wrap">
  <img src="some-images.jpg" alt="some image here"/>
</div>

＆＃13;

Answer 3

您可以使用transform: translate

＆＃13;

.image-wrap {
  position: relative;
  height: 400px;
  text-align: center;
  border: 1px dashed gray;
}
.image-wrap img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

＆＃13;

<div class="image-wrap">
  <img src="http://placehold.it/200" alt="some image here"/>
</div>

＆＃13;

现在，如果您希望它的行为与background-size: auto 100%相同，请执行此操作

＆＃13;

.image-wrap {
  position: relative;
  height: 200px;
  border: 1px dashed gray;
  overflow: hidden;
}
.image-wrap img {
  position: relative;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

＆＃13;

<div class="image-wrap">
  <img src="http://placehold.it/600x100" alt="some image here"/>
</div>

<div class="image-wrap">
  <img src="http://placehold.it/200x400" alt="some image here"/>
</div>

＆＃13;

这是一个表现为background-size: cover的版本

＆＃13;

.image-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  border: 1px dashed gray;
  margin-bottom: 10px;
}
.image-wrap img {
  position: relative;
  min-height: 100%;
  min-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

＆＃13;

<div class="image-wrap">
  <img src="http://placehold.it/600x100" alt="some image here"/>
</div>

<div class="image-wrap">
  <img src="http://placehold.it/200x400" alt="some image here"/>
</div>

＆＃13;

此版本的行为为background-size: contain

＆＃13;

.image-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  border: 1px dashed gray;
  margin-bottom: 10px;
}
.image-wrap img {
  position: relative;
  max-height: 100%;
  max-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

＆＃13;

<div class="image-wrap">
  <img src="http://placehold.it/600x100" alt="some image here"/>
</div>

<div class="image-wrap">
  <img src="http://placehold.it/200x400" alt="some image here"/>
</div>

＆＃13;

Answer 4

＆＃13;

.parent-div {
  width: 50vw;
  height: 720px;
  position: relative;
  z-index: 1;
}

.image-wrap {
  background-position: 50% 50%;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

＆＃13;

you can use like this
<div class="parent-div">
  <div class="image-wrap" style="background-image: url('http://weknowyourdreams.com/images/nature/nature-02.jpg')"></div>
</div>

＆＃13;

Answer 5

这是FlexBox属性变得非常有用的地方。您可以将容器上的align-items: center;设置为（默认情况下）垂直居中任何子元素。这是一个例子：https://jsfiddle.net/ks62qtns/

这样做的好处是您不需要知道布局中涉及的任何元素的尺寸 - 这对于响应式设计和/或动态内容非常有用。

现代浏览器中的Flex属性为reasonably well supported。您可能需要回退来支持旧版本的IE（如果需要）

HTML：

<div class="container">
  <div class="content">
    <h1>
    Content. Any Content.
    </h1>
    <p>
    I might have anything in me!
    </p>
  </div>
</div>

CSS：

.container {
  display: flex;
  align-items: center;
  justify-content: center;

  background: #EEE;

  /* This is just to make a big container. You can set the dimensions however you like.*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.content {
  background: #89D485;
  padding: 2rem;
  text-align: center;
}

Answer 6

这是大多数开发人员遇到的最经过深思熟虑的问题。如果对象在另一个对象内，你可以只使用margin：0 auto;在CSS里面。这将使左右方向排列正确。这也适用于从小屏幕到大屏幕的所有媒体查询。

Answer 7

您可以使用jquery计算div和图像的宽度。

addItem(e) {
  e.preventDefault(); //To prevent the page reload on submit

  var itemArray = this.state.items;

  itemArray.push({
    text: this.refs.inputElement.value
  });

  this.refs.inputElement.value = ""; // clearing the value
}

render() {
  return( 
    <div>
      <form onSubmit={this.addItem.bind(this)} >
        <input ref="inputElement" placeholder={this.props.placeHolder} type="text"/>
        <button type="submit">Submit</button> 
      </form>
      {
        this.state.itemArray.map((item) => {
          return(<span>{item}</span>)
        })
      }
    </div>
  );
}

这意味着：（（div的宽度） - （图像的宽度））/ 2

这将使图像完美居中。

Answer 8

就像这样做。设置容器的属性＆＃34; text-align：center＆＃34;，使它成为内联块元素和100％高度，然后可以得到你想要的。

.image-wrap{
    width: 50vm;
    height: 720px;
    text-align: center;
}
.image-wrap img{
    display: inline-block;
    height: 100vm;
}

像设置背景位置一样在div内的中心图像

8 个答案:

HTML：

CSS：