在父元素上使用display:grid并将margin:auto设置为居中元素即可:

请看下面的片段:

html,身体{ 宽度:100%; 高度:100%; 保证金:0; 填充:0; ｝ .container { 显示:网格; 高度:90%; 背景颜色:蓝色; ｝ .content { 保证金:汽车; 颜色:白色; ｝ < div class = "容器" > <div class="content"> cented div here</div> < / div >

尽管当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或其他答案中显示的固定宽度/高度解决方案。

虽然我太晚了，但这很简单。页面中心总是向左50%，顶部50%。减去div width和height的50%设置左右边距。希望它适用于所有地方

身体{ 背景:# EEE; ｝ .center-div { 位置:绝对的; 宽度:200 px; 高度:60 px; 左:50%; margin-left: -100 px; 上图:50%; margin-top: -30 px; 背景:# CCC; 颜色:# 000; text-align:中心; ｝ < div class = " center-div”> <h3>这是中心div</h3> < / div >

div { 位置:绝对的; 上图:50%; 左:50%; 转换:翻译(-50%，-50%); -ms-transform: -50%， -50%;/*即9 */ -webkit-transform (-50%， -50%);/* Chrome, Safari, Opera */ ｝ <身体> <div> div要垂直对齐 < /身体>

位置:主体文档中的绝对div

有位置的元素:绝对的;相对于最近的定位祖先(而不是相对于视口(主体标记)，像固定的那样)定位。

然而;如果绝对定位元素没有定位父元素，它将使用文档主体，并随着页面滚动而移动。

来源:CSS位置

如果你正在使用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/

我喜欢的方法是将一个盒子垂直和水平居中，是以下技术:

外容器

应有显示:表;

内容器

应该有display: table-cell; 应该有垂直对齐:中间; 应该有text-align: center;

内容框

应该有显示:inline-block; 应该重新调整水平文本对齐，如。text-align:左;或者text-align: right;，除非你想让文本居中

这种技术的优雅之处在于，你可以将你的内容添加到内容框中，而不用担心它的高度或宽度!

Demo

body { margin : 0; } .outer-container { position : absolute; display: table; width: 100%; /* This could be ANY width */ height: 100%; /* This could be ANY height */ background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .centered-content { display: inline-block; text-align: left; background: #fff; padding : 20px; border : 1px solid #000; } <div class="outer-container"> <div class="inner-container"> <div class="centered-content"> You can put anything here! </div> </div> </div>

看看这小提琴!

EDIT

是的，我知道你可以通过transform实现或多或少相同的灵活性:translate(-50%， -50%);或者transform: translate3d(-50%，-50%， 0);，我建议的技术有更好的浏览器支持。即使使用浏览器前缀，如-webkit， -ms或-moz, transform也不能提供完全相同的浏览器支持。

所以如果你关心旧的浏览器(例如。IE9及以下版本)，您不应该使用transform进行定位。