Centering wide div inside a thinner mask div

I'm trying to center a wide div inside a smaller one, and center it. Can this be done?

I've got this:

HTML

<body>
<div id="full_container">
<div id="machine_mask">
<div id="machine_container">
<!---- SOME CONTENT HERE --->
</div>
</div>
<div class="machine_footer">
<img src="sprites/base_maquina.png" alt="panel de control" />
</div>
</div>
</body>

CSS

body {
    margin :0;
}
div#full_container {
    width: 100%;
    height: 100%;
    background: #805080;
}
div#machine_mask {
    margin-top: 30px;
    width: 100%;
    display: inline-block;
    height: 600px;
    background: #805080;
    position: relative;
    overflow: hidden;
}
div#machine_container {
    width: 1230px;
    height: 500px;
    background: #805080;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

When the window is wider than 1230px, it centers, but I really need for it to be centered when the window is smaller...

Is there a way to do this? (I was thinking about using jQuery and repositioning it, but I'd really prefer to do this in css)

Thank you very much!

Solution

You could use the absolute positioning hack.

div#machine_container {
    width: 1230px;
    height: 500px;
    background: #805080;
    position: absolute;
    left: 50%;
    margin-left: -615px; //half of 1230px
    overflow: hidden;
}