Question

我试图将div水平和垂直居中于另一个div中。我的问题是在窗口大小调整父div的宽度和高度更改。为此，我有问题将div放在父div的中心。下面是我定义父div的宽度和高度的情况：

<div id="parent" style="">  
  <div id="child">Foo foo</div>
</div>

和ccs：

#child {
  display: table;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color:red;
  width:50px; 
  height:50px
}
#parent{
  background-color:blue;
  width:400px; 
  height:400px;
}

我不知道为什么实现它如此困难？ JSFIDDLE

Answer 1

这是实现它的一种方法：）

https://jsfiddle.net/e4xhrvcf/

.parent{
  width:500px;
  height: 500px;
  background-color:red;
  display: flex;
  align-items: center;
}

Answer 2

使用CSS-Flexboxes为父div设置display: flex;，为子div设置margin: auto。从css中删除top，bottom，right，left。

Answer 3

如果我明白你想要什么，我认为你只需要在父母身上增加相对位置，以便让孩子能够绝对工作：

#parent{
 background-color:blue;
 width:400px; 
 height:400px;
 position : relative;
}

Answer 4

http://codepen.io/anon/pen/rrdVbO

==> cscript //NOLOGO D:\VB_scripts\SO\39934370.vbs
39934370.vbs
1+1     2
2/4     0,5
0.5**8  !!! 0x3EA Syntax error
0.5*8   4
4=4     True
True+5  4
4=5     False
False+5 5
5       5

==>

父母需要#parent{ position: relative; background-color:blue; width:400px; height:400px; } #child { position: absolute; top: 50%; left: 50%; background-color:red; width:50px; height:50px; transform: translate(-50%, -50%); }定义孩子的position才能正常工作。使用顶部和左侧50％将孩子的左上角居中，然后absolute将其向上移动并向左移动一半自己的高度和宽度。

Answer 5

试试这个，

HTML

<div id="grandParent">
  <div id="parent">
    <div id="child">
    foo foo
    </div>
  </div>
</div>

CSS

html, body{
  height:100%;
}

#grandParent{
  display: table;
  min-height:100%;
  width:100%;
}

#parent{
 background-color:red;
 display:table-cell;
 text-align: center;
 vertical-align:middle;
}

#child {
 background-color:blue;
 display:table;
 margin:0 auto;
}

小提琴

https://jsfiddle.net/guruling/7o764szj/2/

当父div高度未定义时，将div放在另一个div中

5 个答案: