The design of the page is barely this:

What I want to do is putting Redbox(which has 1 in it) in the middle of "PlayerOneDiv"

and same for yellow box for "PlayerTwoDiv".

return (<div className="App">
        <div className="sampleDiv" onClick={getData}>
            <div className="playerOneScoreDiv">1</div>
            <div className="midDiv">
                <Box param={pitValue1} funcParam={getData}> b</Box>
            </div>
            <div className="playerTwoScoreDiv">3</div>
        </div>

Style of PlayerOneDiv and outer div is:

  .sampleDiv {
    background-color: green;
    margin: auto;
    width: 60%;
    padding: 100px;
    border-radius: 14px;
    display: flex;
    flex-direction: row;
}

.playerOneScoreDiv {
    width: 15%;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: bold;
    border-radius: 14px;
    color: #fff;
    margin-right: 4px;
    margin-bottom: 4px;
    cursor: default;
    background-color: red;
}

When I play with PlayerOneDiv, the number "1" is shifting in the box but I could not shift the box itself into mid of the div.

Which property do I need to change or should I need to add another wrapper div?

CodePudding user response：

Here, is the sample code, that might give you an idea about your case.

.sampleDiv{
  display: flex;
  gap:10px;
  justify-content: space-around;
}
.playerOneScoreDiv,
.playerTwoScoreDiv{
  background: red;
  flex-basis: 25%;
  display: flex;
  align-self: center;
  justify-content: center;
}
.midDiv{
  background: green;
  flex-basis: 50%;
}

<div >
    <div >1</div>
    <div >
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
    <div >3</div>
</div>

Let me explain this code briefly:

• I have made the parent div sampleDiv as flex, and the main thing you might be looking for is justify-content: space-around. To know more about justify-content you can visit here
• Although the first case, should probably fulfill your needs, in case you want to have more control and switch the position of each child div, you could set this child div as a new flex as well. And if you add the property align-self, with align-self:center, it will try to align itself to the cross axis. For, all available options on align-self you can visit: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
• gap will add gap between each flex-item
• flex-basis will set the size of the flex-item

CodePudding user response：

HTML:

<div id="container">
  <div id="left">
    
  </div>
  <div id="middle">
    
  </div>
  <div id="right">
    
  </div>
</div>

CSS:

#container {
  width: 220px;
  height: 32px;
  background-color: khaki;
  overflow-x: clip;
  display: flex;
}

#left {
  justify-content: left;
  width: 32px;
  float: left;
  height: 32px;
  line-height: 32px;
  background-color: darkkhaki;
}

#middle {
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background-color: darkkhaki;
}

#right {
  width: 32px;
  height: 32px;
  float: right;
  background-color: darkkhaki;
}