3 items in a row, but the middle should contain multiple divs and be centred

Question

I was trying to create an option swiper. Here's my code

let mode = 0;
let divs = [];

for(let i = 0; i < 3; ++i)
  divs[i] = document.getElementById("mode"+i);

function hide(m) {
  let dom = divs[m];
  dom.classList.remove("show");
  dom.classList.add("hide");
}

function show(m) {
  let dom = divs[m];
  dom.classList.add("show");
  dom.classList.remove("hide");
}

function next() {
  hide(mode);
  mode = (mode+1)%3;
  show(mode);
}

function previous() {
  hide(mode);
  mode = (mode+2)%3;
  show(mode);
}

.text-wrap > * {
  background: red;
  position: absolute; 
  top:0px; 
  text-align: center;
}

.swipe-wrap {
  width: 300px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.hide {
    visibility: hidden;
}

.show { 
    visibility: visible;
    animation: fadein 1.5s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

<div class="swipe-wrap">
  <button onclick="previous()">&lt;</button>
  <div class="text-wrap">
    <div class="show" id="mode0">Lorem</div>
    <div class="hide" id="mode1">Ipsum</div>
    <div class="hide" id="mode2">Dori Me</div>
  </div>
  <button onclick="next()">&gt;</button>
 </div>

The <, > should be ad far left and right in the div as they can be. The text in the middle should be vertically and horizontally centred. However, I'm failing to centre the text in the middle.

Is my approach wrong in general or can it be fixed with some nice combination of style attributes?

Answer 1

Add below css for .text-wrap to make element center vertically and horizontally

.text-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
} 

let mode = 0;
let divs = [];

for(let i = 0; i < 3; ++i)
  divs[i] = document.getElementById("mode"+i);

function hide(m) {
  let dom = divs[m];
  dom.classList.remove("show");
  dom.classList.add("hide");
}

function show(m) {
  let dom = divs[m];
  dom.classList.add("show");
  dom.classList.remove("hide");
}

function next() {
  hide(mode);
  mode = (mode+1)%3;
  show(mode);
}

function previous() {
  hide(mode);
  mode = (mode+2)%3;
  show(mode);
}

.text-wrap > * {
  background: red;
  position: absolute; 
  text-align: center;
}

.swipe-wrap {
  width: 300px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.hide {
    visibility: hidden;
}

.show { 
    visibility: visible;
    animation: fadein 1.5s;
}

.text-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

<div class="swipe-wrap">
  <button onclick="previous()">&lt;</button>
  <div class="text-wrap">
    <div class="show" id="mode0">Lorem</div>
    <div class="hide" id="mode1">Ipsum</div>
    <div class="hide" id="mode2">Dori Me</div>
  </div>
  <button onclick="next()">&gt;</button>
 </div>