center element in div

1.container {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}

1.row {
2  width: 100%;
3  display: flex;
4  flex-direction: row;
5  justify-content: center;
6}
7.block {
8  width: 100px;
9}

1.element {
2  position: absoloute;
3  margin: auto;
4  left: 0;
5  right: 0;
6  top: 0;
7  bottom: 0;
8}

1/* Centering an element without flexbox */
2.parent-element {
3  position: relative;
4}
5
6.child-element {
7	position: absolute;
8  	left: 50%;
9  	top: 50%;
10  	transform: translate(-50%, -50%);
11}
12
13/* Centering an element using flexbox */
14.parent-element {
15	display: flex;
16  	align-items: center;
17  	justify-content: center;
18}

1.MyDiv{
2  	display: block;
3  	margin-left: auto;
4	margin-right: auto;
5}

1/* html */
2<h1>Centering with CSS</h1>
3
4<h3>Text-Align Method</h3>
5<div class="blue-square-container">
6  <div class="blue-square"></div>
7</div>
8
9<h3>Margin Auto Method</h3>
10<div class="yellow-square"></div>
11
12<h3>Absolute Positioning Method</h3>
13<div class="green-square"></div>
14
15/* css */
16h1,
17h3 {
18  text-align: center;
19}
20
21.blue-square-container {
22  text-align: center;
23}
24
25.blue-square {
26  background-color: #0074D9;
27  width: 100px;
28  height: 100px;
29  display: inline-block;
30}