div horizontal center code example
Example 1: css center
/* this will center all children within the parent element. */
.parent {
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
}
Example 2: 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! */
Example 3: css align center vertical and horizontal
.parent-class {
display: flex;
align-items: center;
justify-content: space-around;
}
Example 4: how to horizontal center a div in css
#inner {
width: 50%;
margin: 0 auto;
}
Example 5: how to center div
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 80%;
border: 3px solid #73AD21;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>
<div class="center">
<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>
</body>
</html>