+ 3
how to display a <div> exactly in the center of the webpage ?
3 odpowiedzi
+ 3
.main {
height: 150px; width: 400px;
display: inline-table;
}
.paragraph {
display: table-cell;
vertical-align: middle;
text-align: center ;
}
+ 2
margin:0 auto;
0
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;
}