使用Flex-box在我看来:

#{母公司 显示:flex; justify-content:中心; 对齐项目:中心; ｝ < div id = "父" > <div id="child">Hello World!< / div > < / div >

您可以看到，只有三个CSS属性可以用于将子元素垂直和水平居中。显示:flex;通过激活Flex-box display来完成主要部分，justify-content: center;将子元素垂直居中并对齐-items: Center;水平居中。为了看到最好的结果，我只添加了一些额外的样式:

#{母公司 显示:flex; justify-content:中心; 对齐项目:中心; 身高:500 px; 宽度:500 px; 背景:黄色; ｝ #孩子{ 宽度:100 px; 身高:100 px; 背景:银色; ｝ < div id = "父" > <div id="child">Hello World!< / div > < / div >

如果你想了解更多关于Flex-box的知识，你可以访问W3Schools, MDN或CSS-Tricks获取更多信息。

尽管当OP问这个问题时，这并没有起作用，但我认为，至少对于现代浏览器来说，最好的解决方案是使用display: flex或伪类。

你可以在下面的小提琴中看到一个例子。 这是更新后的小提琴。

对于伪类，一个例子可以是:

.centerPseudo {
    display:inline-block;
    text-align:center;
}

.centerPseudo::before{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
    width:0px;
}

display: flex的用法，根据css-tricks和MDN说明如下:

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

flex还有其他可用的属性，在上面提到的链接中解释了这些属性，并提供了进一步的示例。

如果你必须支持不支持css3的旧浏览器，那么你可能应该使用javascript或其他答案中显示的固定宽度/高度解决方案。

div {
    border-style: solid;
    position: fixed;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
}

调整左侧和顶部的宽度和高度，即(100% - 80%)/ 2 = 10%

另一个答案是这样的。

<div id="container"> 
    <div id="centered"> </div>
</div>

还有css:

#container {
    height: 400px;
    width: 400px;
    background-color: lightblue;
    text-align: center;
}

#container:before {
    height: 100%;
    content: '';
    display: inline-block;
    vertical-align: middle;
}

#centered {
    width: 100px;
    height: 100px;
    background-color: blue;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
}

如果你正在使用JQuery，你可以使用.position();

<div class="positionthis"></div>

CSS

.positionthis {
    width:100px;
    height:100px;
    position: absolute;
    background:blue;
}

Javascript JQuery ()

$(document).ready(function () {
    $('.positionthis').position({
        of: $(document),
        my: 'center center',
        at: 'center center',
        collision: 'flip flip'
    });
});

http://jsfiddle.net/vx9gV/

这是最好的代码，以中心的div机器人水平和垂直

div ｛ 位置:绝对的; 上图:50%; 左:50%; 变换:翻译(-50%,-50%); ｝