I have a problem when scaling the site. The site is shifted to the left corner and I would like to stay in the center. How to do it? Here is the code of my page:

* { margin: 0; padding: 0; } @media (max-width: 990px) { img {max-width: 100%; height: auto;} } @media (max-width: 900px) { img {max-width: 100%; height: auto;} } @media (max-width: 820px) { img {max-width: 100%; height: auto;} } @media (max-width: 680px) { img {max-width: 100%; height: auto;} } @media (max-width: 506px) { img {max-width: 100%; height: auto;} } @media (max-width: 650px) { img {max-width: 100%; height: auto;} } html { width: 100%; } body { background: #000; max-width: 1262; padding: 0; margin: 0px auto; } header { text-align: center; padding: 0; margin: 0; } .leftimg { margin-top: -325px; margin-left: -97px; } .rightimg { margin-top: -1192px; margin-left: 1047px; } .baza-01 { margin-left: 15px; padding: 0; margin-top: -830px; } .baza-02 { margin-left: 217px; padding: 0; margin-top: -204px; } .baza-03 { margin-left: 419px; padding: 0; margin-top: -204px; } .baza-04 { margin-left: 621px; padding: 0; margin-top: -204px; } .baza-05 { margin-left: 823px; margin-top: -204px; padding: 0; } /*content*/ img.animate3 { filter: alpha(Opacity=25); /* แƒ’แƒแƒ›แƒญแƒ˜แƒ แƒ•แƒแƒšแƒแƒ‘แƒ IE-แƒกแƒแƒ—แƒ•แƒ˜แƒก */ opacity: 0.25; /* แƒœแƒแƒฎแƒ”แƒ•แƒ แƒแƒ“แƒ’แƒแƒ›แƒญแƒ˜แƒ แƒ•แƒแƒšแƒแƒ‘แƒ แƒกแƒฎแƒ•แƒ แƒ›แƒ˜แƒ›แƒแƒ›แƒฎแƒ˜แƒšแƒ•แƒ”แƒšแƒ”แƒ‘แƒ˜แƒกแƒแƒ—แƒ•แƒ˜แƒก */ -moz-transition: all 1s ease-in-out; /* แƒ’แƒแƒ“แƒแƒกแƒ•แƒšแƒ˜แƒก แƒ”แƒคแƒ”แƒฅแƒขแƒ˜ Firefox-แƒ˜แƒกแƒแƒ—แƒ•แƒ˜แƒก แƒ•แƒ”แƒ แƒกแƒ˜แƒแƒ›แƒ“แƒ” 16.0 */ -webkit-transition: all 1s ease-in-out; /* แƒ’แƒแƒ“แƒแƒกแƒ•แƒšแƒ˜แƒก แƒ”แƒคแƒ”แƒฅแƒขแƒ˜ Chrome แƒ•แƒ”แƒ แƒกแƒ˜แƒแƒ›แƒ“แƒ” 26.0, Safari, Android แƒ“แƒ iOS */ -o-transition: all 1s ease-in-out; /* แƒ’แƒแƒ“แƒแƒกแƒ•แƒšแƒ˜แƒก แƒ”แƒคแƒ”แƒฅแƒขแƒ˜ Opera-แƒกแƒ—แƒ•แƒ˜แƒก แƒ•แƒ”แƒ แƒกแƒ˜แƒแƒ›แƒ“แƒ” 12.10 */ transition: all 1s ease-in-out; /* แƒ’แƒแƒ“แƒแƒกแƒ•แƒšแƒ˜แƒก แƒ”แƒคแƒ”แƒฅแƒขแƒ˜ แƒกแƒฎแƒ•แƒ แƒ›แƒ˜แƒ›แƒแƒ›แƒฎแƒ˜แƒšแƒ•แƒ”แƒšแƒ”แƒ‘แƒ˜แƒกแƒแƒ—แƒ•แƒ˜แƒก */ } img.animate3:hover { filter: alpha(Opacity=100); /* แƒ’แƒแƒ›แƒญแƒ˜แƒ แƒ•แƒแƒšแƒแƒ‘แƒ IE-แƒกแƒ—แƒ•แƒ˜แƒก */ opacity: 1; /* แƒ’แƒแƒ›แƒญแƒ˜แƒ แƒ•แƒแƒšแƒแƒ‘แƒ แƒกแƒฎแƒ•แƒ แƒ›แƒ˜แƒ›แƒแƒ›แƒฎแƒ˜แƒšแƒ•แƒ”แƒšแƒ”แƒ‘แƒ˜แƒกแƒ—แƒ•แƒ˜แƒก */ } .content { width: 1100px; max-width: 1045px; min-width: 1045px; margin-left: 110px; position: absolute; }

Question from @Oleg answer

  • Some notes to the styles: the body tag is better not to hang anything related to the size of the window, it is better to create a separate class inside it to work with it and set the desired dimensions. @media for the same tag, and the properties of which do not change, it is better to put in a separate class, or to do globally - Vasily Barbashev

1 answer 1

Here is my example of a constantly centered unit.

The essence of the options for the class:

 position: absolute; margin: 0 auto; left: 0; right: 0;

Living example:

http://codepen.io/bustexz/pen/KzqPxL