Question

水平定心不起作用的情况很多。我检查了很多解决方案，但没有人适合我。我有两个包装器，我使用margin：0 auto;这里为了清楚说明，您可以在此处看到jsfiddle：http://jsfiddle.net/JdtKV/

宽度：100％，有效。实际上我想要一个固定长度的块保持在中间底部。

在我的开发过程中，类似的代码存在另一个问题： Different CSS bottom placement for Firefox and Chrome with table

这是我的HTML：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test</title>
    <link href="test.css" rel="stylesheet">
</head>
<body>
    <div class= 'container border'>
        <div class="container-content border">
            I should be in the middle
            <div class="container-content-bottom border">
               I also want go to middle
            </div>
        </div>
    </div>
</body>
</html>

和css在这里：

html, body{
    height:100%;
    min-height: 100%;
}
.container{
  display: table;
    height:100%;
    width: 100%;
}

.container-content{
    display: table-cell;
    position: relative;
    vertical-align: middle;
    text-align: center;
}

.container-content-bottom{
    margin:0 auto; 
    position: absolute;
    bottom: 0;
}

.border{
    border: solid 1px #00f;
}

Answer 1

如果你想继续使用＆＃34; position：absolute＆＃34;你可以为＆＃34; left＆＃34;定义一个值。以容器内容底部div为中心。

.container-content-bottom{
width:50%;
position:absolute;
bottom:0;
left:25%;
}

从那里你可以定义div的宽度并改变left的值直到它居中。

http://jsfiddle.net/JdtKV/2/

您也可以添加＆＃34;宽度：100％;＆＃34;如果这是你正在寻找的结果。

.container-content-bottom{
width:100%;
position:absolute;
bottom:0;
}

Answer 2

这将使文本居中。不确定这是否是所需的结果。如果没有，你可能想要在Paint或其他东西中制作你想要的样本。

CSS：

.container-content-bottom {
    wdith: 100%;
    text-align: center;
    position: absolute;
    bottom: 0;
}

Answer 3

你不需要＆＃34;职位：绝对＆＃34;。而且我把宽度＆lt; 100％的div，你想把它放到中间。

这是我改变的css部分：

.container-content-bottom{
    margin:0 auto; /*try use width:100% instead, strange effect happens*/
    width:50%;
    bottom: 0;
    background-color:red;
}

Answer 4

使用text-align:center;和margin: 0 auto; display: block。

如果它是块或图像，则应应用边距属性，并将其显示为块（如上所示）

示例：

.block {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

如果它只是文字，则使用text-align: center。

P.S：可以找到更多信息here

Answer 5

的 Demo

只需添加right:0; left:0; margin:auto;
即可
将.container-content-bottom的样式更改为

.container-content-bottom{ margin:auto; position: absolute; bottom: 0; right:0; left:0; }

水平居中的元素

5 个答案: