css - 为什么通过 "margin"技巧居中的大 div 从左侧切掉

标签 css html

我对 div 居中有一个非常奇怪的问题,我能够缩小到这个 Fiddle .基本上我有非常大的 div (3000px),我想将它放在页面的中心。我使用了负边距的旧好技巧:

.my_div
{
    width:3000px;
    position:absolute;
    left:50%;
    margin-left:-1500px;
}

当浏览器窗口小于 3000 像素时,我非常震惊地发现这会剪切 div 的最左侧部分(在 Firefox 25 和 Chrome 30 中测试)。我肯定遗漏了一些明显的东西,因为我使用这个技巧已经几年了,而且从来没有遇到过任何问题......

编辑: 澄清一下,我不希望滚动居中,我希望 div 居中(以防 div 小于窗口)。如果 div 更大,那么滚动到最左边对我来说完全没问题,我只需要不通过浏览器剪切 div。我正在用 3000px 进行测试,但我页面中的实际 div 大小为 1100px 并且问题在那里非常真实

最佳答案

margin: 0 auto; 应该让 div 居中。

我更新了你的 fiddle 以包含 margin:0 auto;而不是 left:50%;等

我还添加了一个较小的 div,它也使用 margin:0 auto;显示它如何使用较小的 div。

Let me know if this isn't what you're looking for and I can try to help you further.

关于css - 为什么通过 "margin"技巧居中的大 div 从左侧切掉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19913352/

相关文章:

html - 使用 flexbox 在链接中垂直对齐文本

css - 将 CSS/SASS 规则应用于外部元素而不是内部元素

html - 无法在浏览器中滚动页面

javascript - Backbone : how can i add event for html5 video?

java - angularJS ng-dropdown-multiselect 实现无限滚动的滚动事件

javascript - ul 中的交换列表和事件元素位置保持不变

css - 如何以红色突出显示网络表单上有错误的字段? (由 JSP 生成的表单)

css - Angular Material 表 - 表内边框

jquery - 将背景图像 Url 更改为输入字段的值

html - 如何让侧边栏与页面右侧的文本对齐?