i'm fairly new to css and its terminology so i'm sorry if the question has already been answered somewhere but i didn't know what to look for.

I wanted the yellow button here to stay at the exact center between the two textareas but whenever i resize the window it goes either too on the left side or too on the right and it looks awful. I don't know how to fix this and i'm stuck. Here's the code i've written so far:

<main>
    <div >
        <div >
            <textarea ></textarea>
        </div>
        <button ></button>
        <div >
            <textarea ></textarea>
        </div>
    </div>
</main>

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

textarea {
border: 1px solid black;
resize: none;
height: 50vh;
}

.input1, .input2{
width: 100%;
}

.container {
display: flex;
column-gap: 10px;
width: 100%;
height: 50vh;
align-items: center;
}

.btn {
background-color: yellow;
border: none;
width: 5rem;
height: 5rem;
border-radius: 100%;
z-index: 90;
position: absolute;
left: 46%;
top: 15rem;
}

.input1Container, 
.input2Container{;
width: 50%;
}

CodePudding user response：

Adjust the positioning to add relative to the parent and then center the button using a transform

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

textarea {
  border: 1px solid red;
  resize: none;
  height: 50vh;
}

.input1,
.input2 {
  width: 100%;
}

.container {
  display: flex;
  column-gap: 10px;
  width: 100%;
  height: 50vh;
  align-items: center;
  position: relative;
}

.btn {
  background-color: yellow;
  border: none;
  width: 5rem;
  height: 5rem;
  border-radius: 100%;
  z-index: 90;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
}

.input1Container,
.input2Container {
  width: 50%;
}

<main>
  <div >
    <div >
      <textarea ></textarea>
    </div>
    <button ></button>
    <div >
      <textarea ></textarea>
    </div>
  </div>
  </main>