Question

有没有办法只使用css动态居中两个对象？通过动态中心，我的意思是如果其中一个对象的大小发生变化，则css不会有变化。

目前使用下面的css实现非动态im，有没有办法在不知道子元素的高度尺寸的情况下做到这一点，因此无法设置top:和{ {1}}正确吗？

HTML

left:

CSS

<div class="box">
    <img src="myimageurl" width="100" height="100">
</div>

我在这里提出了一个问题：http://jsfiddle.net/gnygxbxe/

Answer 1

使用display: table-cell，vertical-align进行垂直居中，text-align进行水平居中。

.img {    
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

http://jsfiddle.net/gnygxbxe/1/

Answer 2

＆＃13;

.box {
    width: 200px;
    height: 200px;
    background: red;
}

.box img {   
    position:relative;  top: 50%; left: 50%; 
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
}

＆＃13;

<div class="box">
    <img src="http://www.reviversoft.com/blog/wp-content/uploads/2013/08/Spinning-Beach-Ball1.png" width="100" height="100">
</div>

＆＃13;

Answer 3

如果您支持“常青树”浏览器，请使用css“translate”，请参阅下文：

.box {
    position: relative;
    width: 200px;
    height: 200px;
    background: red;
}

.box img {
    position:absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

http://jsfiddle.net/gnygxbxe/2/

Answer 4

您无需计算任何百分比位置。使用伪元素使其居中。您只需要确保其中的所有元素都具有属性display: inline-block和vertical-align: middle。

请记住，框内的元素应该在1行。因此，如果您想要放置许多文本，只需将文本包装为span或.box元素内的任何内容。

供参考，请阅读：https://css-tricks.com/centering-in-the-unknown/

请参阅此代码段。 IE8 +支持。

.box {
  margin: 20px;
  background: #f8f8f8;
  border: #f0f0f0 solid 1px;
  text-align: center;
  white-space: nowrap;
}
 
.box:before {
  content: '';
  display: inline-block;
  height: 100%;
  margin-right: -0.15em;
  vertical-align: middle;
}
.box > * {
  display: inline-block;
  padding: 15px;
  border: 1px solid #ccc;
  vertical-align: middle;
}

<div class="box" style="height: 300px;">
  <img src="http://placehold.it/100x100" />
</div>

Answer 5

你也可以这样做

.box {
  width: 200px;
  height: 200px;
  background:red;
  position:relative; 
}

.box img { 
  display:block;
  position:absolute;
  top:0; 
  left:0;
  right:0;
  bottom:0;
  margin:auto;
}

Answer 6

＆＃13;

.box {
    width: 200px;
    height: 200px;
    background: red;
    position: absolute;
    text-align: center;
}

.box img {
    display: inline-block;
    vertical-align: middle;
}

.centered {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

＆＃13;

<div class="box">
    <span class="centered"></span>
    <img src="http://www.reviversoft.com/blog/wp-content/uploads/2013/08/Spinning-Beach-Ball1.png" width="100" height="100">
</div>

＆＃13;

使用css动态地居中对齐元素

6 个答案: