css - 当对象大于视口(viewport)时,CSS 居中

标签 css centering

我试图让 jquery 轮播位于屏幕中央,即使剪切区域比视口(viewport)更宽。这基本上总是给元素一个负的左边距——我该如何指定呢?剪切区域的宽度是固定的,但视口(viewport)区域当然是可变的。

最佳答案

这是我能找到的最佳解决方案,即在固定宽度内容周围使用环绕元素,然后在内容本身上使用 -50% 的边距。这不是我的想法,但它应该足以让你开始。这是代码片段:

div.wrapper {
    position: absolute;
    left: 50%;
}
.content {
    position: relative;
    margin-left: -50%;
}

<div class="wrapper">
    <div class="content">JQUERY BIZ-NASS HERE</div>
</div>

当然,这假设您的 div 是 body 标记的直接后代,并且您的浏览器指定 body 的宽度为 100% 并且没有边距或填充。

关于css - 当对象大于视口(viewport)时,CSS 居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5958280/

相关文章:

android - Android水平滚动容器(如Gallery)

html - 在包装上居中 flex 元素

html - div定位问题

javascript - 如果单击子元素,则不要更改父元素的颜色

html - 突破位置 :relative *without* changing structure

javascript - 如何创建一组依赖选择列表,其中连续列表取决于前面列表选项的选择?

css - 垂直居中几乎适用于所有浏览器,但不适用于 IE7

html - 如何使父div中的多个div居中?

html - 如何将 4 个元素 2 居中?

php - iframe colorbox 联系表单不会提交,样式不会在验证后保留