I'm trying to position a box in the middle of the screen and regardless of the resolution the text inside it does not leave the box ... Well, I get two things: to position it in the middle, however when I resize my window, the text goes out of the box; and make the box increase along with the resolution, however the box sits at the top of the page.
Here I put html and css: link For you to see already with the image ...
I do not know if I understood your question well, but from what I understand, you want to keep your%% of% always in the center of the screen regardless of the screen resolution, and that it fits your content (my example is for a content of measurable size , I do not know if you will).
What my solution has more than its example is the following (follow the code comments):
left: 50%; /* metade da pagina */
top: 50%; /* metade da pagina */
width: 400px; /* utilize um tamanho que seja suficiente para seu conteúdo horizontal */
height: 260px; /* utilize um tamanho que seja suficiente para seu conteúdo vertical */
margin-left: -200px; /* utilize a metade do valor setado no width para trazer o elemento ao centro horizontal da tela */
margin-top: -130px; /* utilize a metade do valor setado no height para trazer o elemento ao centro vertical da tela */
In addition to the changes I've previously pointed out, the element should continue with form or position: relative; if applicable.
Follow online example to help you understand the proposed solution.
For smaller screens like tablets and smartphones you can create media queries , by adding a rule similar to this in your absolute :
@media (max-width: 410px) {
form {
width: 260px;
height: 340px;
margin-left: -130px;
margin-top: -170px;
}
}
Follow online example updated (lower the screen to a css less than width , to test) .
Example in Plunker , in case the jsFiddle is having problems with quoted by @brasiofilo.