Example of centering an element with a fixed position with the transform property:

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%;

transform: translate(-50%, -50%);

}

</style>

</head>

<body>

Example of centering an element with a fixed position

</div>

</body>

</html>