Good day!

Please tell me what are the options for centering rubber block height. The width of the block is 100px, the height of the content.

Interested options on pure CSS, without using JS.

  • Let's start with a simple one. For which browsers? - koza4ok

3 answers 3

margin: 0 auto;

but only if the block does not have a float. If it is still set, then wrap the block in another div and set its width and margin

  • If cho, then it is horizontal centering. margin: top right bottom left; - lampa
  • @RedMonkey, you need to center vertically, not horizontally. And the block should be rubber in height. Ps. read the question. - Astor
  • one
    then put div display: table-cell; vertical-align: middle; otherwise no tables =) Ps. on the question it is not clear that centering is needed vertically - RedMonkey
  • one
    @RedMonkey what is not clear in the expression “by block height”? - lampa
  • one
    a question the answer. If the block is rubber by weight, this does not mean that it needs to be centered vertically - RedMonkey

As an option: push the block into the table height = width = 100%:

 <table width=100% height=100%> <tr> <td valign='center' style='vertical-align:center;'> <div class='container'></div> </td> </tr> </table>
  • No, I am interested in the option without using tables. - Astor
  • one
    And if the tables, but not the tables? :) jsfiddle.net/g66wd - Cypher
  • @Cypher, thanks. Already done in a similar way. You +10 - Astor Nov.

http://cssing.org.ua/2007/04/26/another-css-valign-method/

http://www.xiper.net/collect/html-and-css-tricks/pozitsionirovanie/vertikalnoe-vyravnivanie-otnositelno-roditelya.html

  • I haven’t checked it yet (I don’t have time) ... Do the given links correspond to the question, namely: does the block have a rubber height? - Astor
  • @ koza4ok, checked. Does not match. Are there any other options? - Astor