<div> Percentage sized and still centered. </div>
body { background: #900; } div { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); /* This doesn't work margin-left: -25%; margin-top: -25%; */ width: 40%; height: 50%; padding: 20px; background: red; color: white; text-align: center; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); }