<html>
<head>
    <style>
        #a { position: relative; height: 100px; width: 150px; border: 2px solid black; }
        #b { position: absolute; left: 25px; height: auto; right: 25px; }
    </style>
</head>
<body>
    <p>The blue box should be horizontally centered in the black box with 25px of white on the left and right.</p>
    <div id="a">
        <img id="b" src="resources/square-blue-100x100.png">
    </div>
</body>
</html>