All geek questions in one place

How to make a body (or div) of a fixed size always remain in the center of the page (even vertically!)

I try to make the body of 1024x768 always remain in the center of the page (top bottom with the same interval, left-right), but I am having problems with this.

I used the trick from the top at 50%, then I put the (absolutely) body at -384px, which is half 768.

However, this method gives me a problem: if your window is less than 768 pixels, you get a scroll bar, but the part of the upper body is cropped, without being able to scroll up (I can still scroll down).

How to solve it?

Edit 1: Here is the code:

HTML code that can be printed on a simple html web page:

<!DOCTYPE html> <html lang="en"> <head> <title>Test</title> <style> /** * Change the basic background color of the page */ html { background-color: blue; } /** * Set the body as a 1024 x 768 rectangle in center of the screen */ body { background-color: red; font-family: TradeGothic, sans-serif; margin-left: -512px; margin-top: -384px; position: absolute; height: 768px; width: 1024px; left: 50%; top: 50%; } </style> </head> <body> some text </body> </html>
+4
source share
1 answer

Add this:

 html { position: relative; min-width: 1024px; min-height: 768px; height: 100%; }

http://jsfiddle.net/thirtydot/TGjN8/9/ (full screen mode: http://jsfiddle.net/thirtydot/TGjN8/9/show/ )

+9
source

Source: https://habr.com/ru/post/1394527/

More articles:


All Articles