Question

我无法将网页内容集中在一起。这是我的HTML的修剪版本以及与该HTML代码相关的所有CSS。

<body>
<div id="foo">

    <div id="bar">
        <!-- more html -->
    </div>
</div>

#foo {
    width: 80%;
    display: inline-block;
    margin: 0 auto;
    position: center;
    background: none;
    margin-top: -0.2em;
}

#foo div {
    display: inline-block;
}

#bar {
    margin: 0 auto;
    margin-top: -1em;
}

内容粘贴在浏览器窗口的左上角。我想让它水平和垂直居中。我如何实现这一目标？

编辑：我最初写的是右上角，但是意思是左上角。

Answer 1

没有position: center。您可以使用position: absolute并设置top / left属性以将其排列在中心（如果它占用整个宽度，您只需使用text-align: center）

top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

http://jsfiddle.net/Pq6CR/

Answer 2

不是位置：中心其 text-align：center; 以对齐中心的内容

检查fiddle

#foo {
    width: 80%;
    display: inline-block;
    margin: 0 auto;
    text-align:center;
    background: none;
    margin-top: -0.2em;
}

并删除 margin-top：-1em 它会将子div = bar移到顶部，内容将被隐藏检查以下

#bar {
    margin: 0 auto;
    /*margin-top: -1em;*/
    border:1px solid red;
}

检查fiddle

水平和垂直居中div元素

2 个答案: