Centering in CSS, when the object is larger than the viewport

问题

I'm trying to get a jquery carousel centered on the screen, even when the clipping area is wider than the viewport. This will basically always give the element a negative left margin -- how can I specify this? The clipping area is a fixed width but of course the viewport area is variable.

回答1:

Here's the best solution I've been able to find uses a wrapping element around your-fixed-width content, then a -50% margin on the content itself. This is off the top of my head, but it should be enough to get you started. Here's the code snippet:

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

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

Of course, this assumes that your div here is a direct descendant of the body tag, and that your browser specifies body to have a width of 100% and no margin or padding.

来源：https://stackoverflow.com/questions/5958280/centering-in-css-when-the-object-is-larger-than-the-viewport