'center div inside parent div whilst also covering another child div

I am making a chess game and when a player wins I need the component to show up in the center of the screen to say , White Wins Etc,

is just:

<div> 
  <p> White Wins <p/>
<div/>

shares the parent div with , thought I want to show right in the centre of board vertically and horizontally.

and I can't just put inside the component, as it would be a lot of work passing values down to it etc.

<div className="board-container">
  <playerWinsAlert/>
  <Board/>
</div>
cssreactjs


Solution 1:[1]

.board {
  position: relative;
  z-index: 1;
}

.message-container {
  position: absolute;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
 }
 <div className="board-container">
  <Board/>
  <div class="message-container">
    <Message/>
  </div>
 </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Marnix Elling

Related Questions