It is necessary to align the symmetrical symbol vertically, for example, "*" in the #big block of the specified width and height in x px:

<div id="big"> <div id="small">*</div> </div>

I tried 2 vehicles:

 1) #big{ line-height: x px; height: x px; ... } #small{ white-space: nowrap; overflow: hidden; ... } 2) #big{ display: table; ... } #small{ vertical-align: middle; display: table-cell; ... }

In the mobile chrome and edge, everything is OK, safari for ios is not. The symbol is always just below the center (but it is noticeable).

What could be the reason? What other techniques can be used, but so that the solution would be cross-browser?

  • one
    The symbol "*" I personally have nifiga is not symmetrical and sticks out noticeably higher than other symbols and in the center will not even out in principle, this is firstly - andreymal pm
  • Secondly, stackoverflow.com/questions/758915 - andreymal
  • Andreymal, "if you put a font in which the height of all letters will be the same" - which font is better to take (which probably is in all browsers)? - AndreyMagnificent
  • If you have a task to push the asterisk exactly in the center - just make a picture, it will be easier - andreymal pm
  • Andreymal, in general, yes, but I need to be right now, and to take pictures for a long time, there are many modifications of the block styles. Change the font, if there is one - quickly. - AndreyMagnificent 3:51 pm

1 answer 1

  #big { width: 200px; height: 200px; background-color: yellow; display: flex; justify-content: center; align-items: center; } #small { margin-bottom: -10px; }

Or send a link to html with css. for specifics.