Question

我想让div类ty-product-block__wrapper在所有设备的中心（水平）对齐。使用的图像仅用于说明目的。我一直试图解决这个问题，但我无法让它发挥作用。这是jsfiddle：https://jsfiddle.net/6txxshk9/

HTML

<div class="ty-tygh">
<div class="ty-helper-container">
  <div class="row-fluid">
    <div class="span16">
      <div class="ty-product-block">
        <div lcass="ty-product-block__wrapper">
          <img src="http://blogsbucket.com/wp-content/uploads/2015/09/google-dk-flat.png">
        </div>
      </div>
    </div>
  </div>
</div>

CSS

div {display: block;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-size: 0;
}
.ty-tygh {
  box-sizing: border-box;
}
.ty-helper-container {
  position: relative;
}
.row-fluid {
  width: 100%;
}
.row-fluid .span16 {
  width: 100%;
}
.row-fluid [class*="span"] {
  display: block;
  box-sizing: border-box;
  box-sizing: border-box;
  float: left;
}
.ty-product-block {
  margin: 0 0 30px 0;
  position: relative;
}
.ty-product-block__wrapper {
  background: #fff;
  padding-top: 20px;
}

Answer 1

这有用吗？

水平居中

.ty-product-block {
  display: block;
  text-align: center;
}

垂直居中

.ty-product-block {
  display: block;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

小提琴：https://jsfiddle.net/6txxshk9/3/

如何使这个div始终对齐中心？

1 个答案: