1

我已经为此搜索了很多答案，并尝试了多人不同的解决方案，但都没有奏效。有没有人有一个简单的方法来做到这一点？

示例图片：

中间的内容

边框应20px远离浏览器的所有边缘。非常感谢任何可以提供帮助的人。

4

6 回答 6

2

在 div 上试试这个 css：

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

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

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

于 2012-11-13T13:21:08.953 回答
1

这在某种程度上是一种比上面回答的方法更敏感的方法。我希望它有帮助

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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

这是一个功能小提琴

于 2012-11-13T13:33:28.227 回答
0

我更新了演示，中间还有内容，请看这个演示

div{
position:absolute;
text-align:center;
width:100%;
height:100%;
bottom: 20px;
top: 20px;
left: 20px;
right: 20px;
padding:50% 0;
}
于 2012-11-13T13:33:08.903 回答
0

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

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;
}

这是产生以下结果的示例代码：

div中的居中内容

编辑（如果内容多于一行，则替代）

与以前相同的 HTML，带有以下 CSS（演示代码）。

#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;
}

居中的三行内容

于 2012-11-13T13:33:17.743 回答
0

这个 CSS 也适用于 content-div

position:absolute;
margin-left: 20%;
width: 60% (100%-margin-left*2);
于 2012-11-13T13:37:18.393 回答
0 
<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>
于 2012-11-13T14:07:18.563 回答