Looking to achieve a square box design using CSS with specific dimensions? Want to insert text inside the square and ensure it is horizontally centered within the square?
Check out this code snippet:
#myid {
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
}
#myid:after {
content: 'hello';
}
<div id="myid" />
While the provided code successfully centers the text "hello" horizontally, it doesn't align it in the middle of the square. How can you resolve this problem?