I have a content block. 818px wide.

<div id="container"> <div id="content"> <div class="block"> <div class="blocktop"></div> <div class="blockmiddle"> <div class="blockcontent"> Тестируем </div> </div> <div class="blockbottom"></div> </div> </div> </div>

And, in css:

 #container { width: 100%; overflow: hidden; } #content { padding: 0 0px 0 0; } .block { width: 818px; } .blocktop { width: 818px; height: 11px; overflow: hidden; background: url("img/topcontent.png"); background-position: center; } .blockbottom { width: 818px; height: 11px; overflow: hidden; margin-bottom: 0px; background: url("img/downcontent.png") center; background-position: center; } .blockmiddle { width: 818px; background: url("img/content.png") repeat-y center; background-position: center; } .blockcontent { text-align: left; margin: 0px 10px 0px 10px; margin-top: 0px; width: 818px; padding: 0px 0px; }

I tried everything I knew. The block is on the left = (.

    4 answers 4

    You do not need to apply narrowly focused methods (and this is align = "center" - because this is already a bearded hack for IE). By the way, did not want to offend anyone. here are a few problems:

    1. priority !!! you need to understand the block model, that is, you need to read. for example, the very first style: #container {width: 100%;...} . everyone went to school and, I think, remember that% is a relative value. And this means that in order to calculate the number of percentages, we need a value relative to which we are counting. Well, set the size of the window. I understand that you wanted to implement a "rubber" layout. and I even remember reading somewhere that, in order to get a rubber mock-up, you just need to replace px with% in determining the width and height. this is not true! the meaning here is simple: first we set the size of the window for which the page is folded, and then we already indicate how many percent blocks from this window occupy.
    2. The second problem is a consequence of the first - an incorrect understanding of the block model. to center the element, it’s enough to write margin: 0 auto . What does this rule mean? this we set the field. As you know, there are 4 rules for defining fields and assigning values ​​from a short form goes clockwise - the field above, the field on the right, the field below, the field on the left. therefore, the element is centered relative to the parent by assigning the same values ​​for the left and right fields. but you have a parent and child width equal to 100%, that is, the child element occupies the full width of the parent element. What is the width of the element? It is the sum of the values ​​of the padding (padding), width (width), margins (margin), width of the border (border) to the left and to the right. we obtain that we have space for the fields, on the basis of which the element will be centered, it is necessary to reduce the width of the centered element (for example, 80% of the parent).

    that's all. longish happened, of course. to make it clearer.

      So, for starters, it would be better to write which block to align. As I understood from the context, this is a block with a class block. For a block with a fixed width there is an excellent solution: .block { left:50%; position: relative; margin-left: -409px; width: 818px; } .block { left:50%; position: relative; margin-left: -409px; width: 818px; } .block { left:50%; position: relative; margin-left: -409px; width: 818px; } This style is working. I advise you to use Google before asking a question, because such a thing is rather trivial and, most importantly, the answer to it is in the top for the query: "align the div in the center of the screen."

        The most common:

         .someBlock{ margin: 0 auto; }

          Try:

           <div id="container" align="center">

          Works)