Center a fixed position element

Set left to 50% and add negative margin-left of half the width of the element. This is how you center a fixed position element. Possible scenarious where you might need it is videos, or any other elements in overlays, light/white-boxes.

.overlay-container {
	width: 200px;
	
	position: fixed;
	left: 50%;
	margin-left: -100px;
}

3 Comments

  1. OP

    or, if you dont have a fixed width on the element, you can try

    .overlay-container {
    left: 50%;
    position: fixed;
    transform: translate(-50%);
    }

    you can even center it vertically, like so

    .overlay-container {
    left: 50%;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    }

    greetings from Romania!

Leave a Reply

Your email address will not be published. Required fields are marked *