Faced such a problem.
In Twitter Bootstrap, the element is not vertically aligned (centered) inside the block.

HTML code:

<div id="box"> <p>выравниваемый элемент</p> </div>

CSS:

 #box { height: 40px; border: 1px solid #fff; display: table-cell; vertical-align: middle; }

Without using this framework, everything works correctly.

    4 answers 4

    In my opinion, the best way to set display: table; parent element and element inside display: table-cell; vertical-align: middle; . Here is a working example:

     #parent { display: table; width:100%; background:#e0e0e0; height:60px; } #child { display: table-cell; vertical-align: middle; text-align:center; } 
     <div id="parent"> <div id="child">Content here</div> </div>

    • one
      You can create an excellent answer by giving examples of solving the problem mentioned in the question from this article. A link to the material can be given as a source. Answers that contain only a link after some time can turn into useless due to changes in the content available on this link. Moreover, not all users of this site are sufficiently familiar with the English language, which reduces the usefulness of your answer - Timofei Bondarev

    The problem is as old as the world and I myself suffer from it sometimes. Try to add line-height: 40px;

    • Thank. The problem was solved by Padding. Bootstrap “swallows” them anyway. Line-height is not an option, since as the screen shrinks, the indents become too large. - Astor
     .elem{ display:flex align-items:center; }
    • one
      Please try to write a little more detailed answers. - aleksandr barakin
    • you yourself know who in their old versions (younger than 11) will not understand it - Ivan Frolov

    vertical-align touches a row or a table cell (an analog is a block with "display: table-cell;"),

    rather than indenting its baseline inside the parent block

    bootstrap is best:

      position: relative; top: 50%;

    (does not work if the parent has "display: table;")

    • Yes you are my friend nekrofil :) - Bastiane
    • did not guess: I am a lover of eternity ... - Leagnus