I want to create a popup window that should have a fixed position (i.e. fixed to the viewport and not moving if the user scrolls the page). The popup should also be horizontally centered. (The popup effect will be implemented using ECMAScript and changing the visibility.)

Using the code below, the centering is not working and I can't understand why.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

	<style type="text/css">

		.wrapper {
			position		: relative;
			border			: 1px dashed gray;
			height			: 1500px;

		.popup {
			position		: fixed;
			border 			: 1px solid blue;
			width			: 300px;
			margin			: 150px auto 150px auto;
			padding			: 5px;




<div class="wrapper">
	<div class="popup">
			Box that should have a fixed position and be centered.