Example of centering an element with a fixed position:

Source Code: (back to article)

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

<style>

.container {

position: fixed;

width: 500px;

height: 200px;

padding: 10px;

border: 3px solid #147d43;

background-color: #d4fce6;

top: 50%;

left: 50%;

margin-top: -100px;/* Negative half of height. */

margin-left: -250px;/* Negative half of width. */

}

</style>

</head>

<body>

Example of centering an element with a fixed position.

</div>

</body>

</html>