Example 1: css align center
//HTML <div class="parent"> <span>Hello World</span> </div> //CSS .parent { display: flex; justify-content: center; align-items: center; }
Example 2: css align items vertical center
.parent { display: flex; justify-content: center; align-items: center; }
Example 3: css center text in div
/* For horizontal align: */ parent-element {text-align:center;} /* For horizontal and vertical align: */ parent-element {position: relative;} element-to-be-centered { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* See https://www.w3schools.com/css/css_align.asp for more info */
Example 4: how to center a div vertically and horizontally
.container{ margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: /* Define the width here; */ height: /* Define the height here; */ } /*You have to define the width and height! */
Comments
Post a Comment