html - 水平居中具有固定位置的div

标签 html css

在下面的代码中,如何将一个固定位置的 div 水平居中?我已经尝试了几种方法,但没有一种方法可以正确地放在中心。

我试图让 div 距离顶部 100px,并且水平居中。

<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
<style type="text/css">
.myDiv {
    position: fixed;
    top:100px;
    left:auto;
    padding:10px;
    background-color: blue;
    color: white;
}
</style>
</head>

<body>
    <div class="myDiv">Something went wrong. God save the Queen!</div>
</body>
</html>

最佳答案

如果你事先不知道你的 div 的宽度(或者如果你不能设置它)你可以使用 transform 属性:

.myDiv {
    position: fixed;
    ...
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

示例代码:http://codepen.io/anon/pen/fqpwd

关于html - 水平居中具有固定位置的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21186504/

相关文章:

javascript - 输入值属性可以定义为空吗?

html - 单击突出显示文本字段内的整个文本

javascript - 使用查询字符串计算来自电子邮件的页面点击次数

css - Twitter-Bootstrap 下拉框重叠

html - 如何将两个span标签放在同一行?

javascript - 我正在尝试拆分此 "for"循环以创建 5 个不同的 DIV 元素

javascript - canvas 标签可以用于在页面上的其他项目之上绘制吗?

javascript - 为手机、平板电脑等构建响应式网页

HTML/CSS : a:hover {-webkit/-moz-transition:color}

html - 显示表格单元格宽度无法正常工作