Question

我已经搜索了很多这方面的答案并尝试了多种不同的解决方案，但都没有奏效。有没有人有一个简单的方法呢？

示例图片：

content in the middle

边框意味着距离浏览器边缘20px。非常感谢能够提供帮助的任何人。

Answer 1

在div上尝试这个css：

position: absolute;
bottom: 20px;
top: 20px;
left: 20px;
right: 20px;
text-align: center;

垂直对齐问题：据我所知，你不能在一个块上使用vertical-align: middle;。只有知道内容高度（或使用javascript），才能解决问题。

你可以使用padding-top: 50%;，但它并不是真正的“中间”。

Answer 2

这有点像上面回答的方法更敏感。我希望它有所帮助

<强> CSS

#wrapper
{
    position:absolute;
    width:100%;
    height:100%;
    border:20px solid #F82;
}
#content
{
    position:relative;
    margin-left:auto;
    margin-right:auto;
    height:20%;
    width:20%;
    top:40%;
    color:#E22;
    font-size:40pt;
}

的 HTML

<div id="wrapper"> <div id="content">Content</div> </div>

这是一个功能fiddle

Answer 3

我更新了演示，中间的内容，请参阅此Demo

div{
position:absolute;
text-align:center;
width:100%;
height:100%;
bottom: 20px;
top: 20px;
left: 20px;
right: 20px;
padding:50% 0;
}

Answer 4

这是一个内容垂直居中的示例：

<强> HTML

<div id="box">
    <div id="content">
        Content
    </div>
</div>

<强> CSS

#box {
    width: 200px;
    height: 200px;
    border: solid 5px #CCC;
    margin: 20px;
    position:relative
}
#content {
    position:absolute;
    top: 50%;
    width: 100%;
    margin-top:-10px; /* Should be half of font-size */
    font-size: 20px;
    text-align: center;
    color: red;
    font-family: "Helvetica", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;
}

以下是产生以下结果的example代码：

Centered content in div

编辑（如果内容超过一行，则替代）

使用以下CSS（demo code）与以前相同的HTML。

#box {
    width: 200px;
    height: 200px;
    border: solid 5px #CCC;
    margin: 20px;
}
#content {
    width: 200px;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;

    color: red;
    font-size: 20px;
    font-family: "Helvetica", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;
}

Centered three lines content

Answer 5

这个css也适用于content-div

position:absolute;
margin-left: 20%;
width: 60% (100%-margin-left*2);

Answer 6

<html>
<head>
    <title>20PX</title>
<style type="text/css">
body{
background-color: blue;}
#test {
position: absolute;
bottom: 20px;
right: 20px;
top: 20px;
left: 20px;
text-align: center;
background-color: red;
}
</style>
</head>
<body>
    <div id="test">
     center text 
    </div>
</body>
</html>

100％高度和宽度DIV，中间含量

6 个答案: