How can i fixed the battery in center of page?

Question

https://code.sololearn.com/WFJjOy6RsBxJ/?ref=app

Answer 1

Here is one way:

body {
background-color: #2E2F31;
position:absolute;
top:calc(50% - 100px/2);
left:calc(50% - (300px + 10px + 8px) / 2);
}

Can you figure out where the numbers come from?

Answer 2

Wrap all html in a container and indent it.

Answer 3

Vasiliy for code playground run on Android width and height of body are not defined.

Answer 4

Here is another way:

html,body {
height: 100%;
}

body {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

https://code.sololearn.com/W5XrpDUSJN1z/?ref=app

Answer 5

Calviղ
In your code, "justify-content" is superfluous, since you set the html height to 100%

Answer 6

Cankat Soysal
There is another problem in this code: "on monitors with a screen width of less than 320px, the image will fall into two parts."
To avoid this, you need to attach the battery contact to the housing using positioning:
.battery{
height: 100px;
width: 300px;
border: white 3px solid ;
border-radius: 8px;
position: fixed;
}
.batteryUc{
height: 30px;
width: 10px;
background-color: white;
border-radius: 2px;
position: relative;
top: 40px;
left: 304px;
}

..."display: inline-block;" no longer needed

P.S: "Now you understand where 40px and 304px came from?"

Answer 7

Cankat Soysal
When indenting from above, 50% is taken - this is the center, now you need to subtract half from the height of the battery from it.
When indenting from the left, you need to take half the battery length together with the contact and margin-left, you have 4px on one side and 4px on the other side, that is, the formula can be this: "calc (50% - 4px - (300px + 10px) / 2) ; "

Answer 8

Cankat Soysal
Thank you very much for marking my answer as the best, but in fact I suggested this method more for training, so that you understand what comes from, and the easiest way is probably this:
html,body{height:100%;}
body {
display: flex;
align: item;
}

Answer 9

Vasiliy yes i understand and thank you

Answer 10

vasily it's work but where the numbers come from?

Answer 11

Where does 8px come from?