how to display a <div> exactly in the center of the webpage ?

Answer 1

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

Answer 2

margin:0 auto;

Answer 3

There are a few tricks to do this. Check this article (https://css-tricks.com/centering-css-complete-guide/).

You can try this code:

main {
position: relative;
height: 200px;
width: 60%;
margin: 0 auto;
padding: 20px;
overflow: auto;
background: #ddd;
}

main div{
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
margin: auto;
width: 50%;
height: 50%;
overflow: hidden;
background: #B63BB6;
color: #fff;
}