.container{<br /><br /> margin: 0;<br /><br /> position: absolute;<br /><br /> top: 50%;<br /><br /> left: 50%;<br /><br /> -ms-transform: translate(-50%, -50%);<br /><br /> transform: translate(-50%, -50%);<br /><br /> width: /* Define the width here; */<br /><br /> height: /* Define the height here; */<br /><br /> }</p><br /> <p>/*You have to define the width and height! */

.center {<br /><br /> position: absolute;<br /><br /> left: 50%;<br /><br /> top: 50%;<br /><br /> transform: translate(-50%, -50%);<br /><br /> border: 5px solid #FFFF00;<br /><br /> padding: 10px;<br /><br /> }

.parent {<br /><br /> position: relative;<br /><br /> }<br /><br /> .child {<br /><br /> position: absolute;<br /><br /> left: 50%;<br /><br /> top: 50%;<br /><br /> transform: translate(-50%, -50%);<br /><br /> }

body {<br /><br /> display: flex;<br /><br /> min-height: 100vh;<br /><br /> flex-direction: column;<br /><br /> justify-content: center;<br /><br /> align-items: center;<br /><br /> }<br /><br /> /* to make “align-items: center” work: use “min-height: 100vh;”<br /><br /> 100vh = 100% Viewport Height */

.center {<br /><br /> display: flex;<br /><br /> align-items: center;<br /><br /> justify-content: center;<br /><br /> }

.parent{<br /><br /> display: flex;<br /><br /> justify-content: center;<br /><br /> align-items: center;<br /><br /> }<br /><br /> /* Child elements will be perfectly centered automatically */

.center {<br /><br /> display: flex;<br /><br /> align-items: center;<br /><br /> justify-content: center;<br /><br /> }

.container {<br /><br /> min-height: 100vh; // height of the browser viewport<br /><br /> display: flex;<br /><br /> flex-direction: column;<br /><br /> justify-content: center;<br /><br /> align-items: center;<br /><br /> }

.name-of-div-to-be-centered {<br /><br /> position: absolute;<br /><br /> left: 50%;<br /><br /> top: 50%;<br /><br /> -webkit-transform: translate(-50%, -50%);<br /><br /> transform: translate(-50%, -50%);<br /><br /> }

.<your-outer-div> {<br /><br /> display: flex;<br /><br /> justify-content: center;<br /><br /> align-items: center;<br /><br /> }