Why we use display in vertical alignment & also why we use div class=main

Question

<div class="main">
<div class="paragraph">
This text is aligned to the middle
</div>
</div>

in CSS

.main {
height: 150px; width: 400px;
background-color: LightSkyBlue;
display:inline-table;
}
.paragraph {
display: table-cell;
vertical-align: middle;
}
in CSS

.main {
height: 150px; width: 400px;
background-color: LightSkyBlue;
display:inline-table;
}
.paragraph {
display: table-cell;
vertical-align: middle;
}

Answer 1

<div class="main"> attribute the class name 'main' to the element, so we can target it easily with css rules to apply to it...

'display' css property is used for vertical alignment because default block and inline behaviour doesn't allow real vertical alignement.
Historicaly, <td> (Table Data -- ie: table cell) element was the only one to be able to really vertical align a content... So, in the code you've provided, 'display' is used to build a table-like structure (but without the semantical elements <table> and <td>), by attributing those behaviour in place of default 'block' of <div>s.

Today there are other ways (mainly one) to have display behaviour that allow vertical centering: flex and grid (the second one isn't really fully supported still now, but it will become in near future)... Flex is quite recent, but major of browsers support it now, and it's a wonderful alternate way to build complexe layouts (even if it require some study to start to understand it enough to begin to see its simplicity ;P)