连续3个项目，但中间应包含多个div并居中

Question

我试图创建一个选项swiper。这是我的代码

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>

<，>应该尽可能地在div中左右两侧进行广告。中间的文本应垂直和水平居中。但是，我没有将文本置于中间位置。

我的方法总体上是错误的还是可以通过一些很好的样式属性组合来解决？

Answer 1

在.text-wrap下面添加css，使元素中心垂直和水平

.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>