连续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>

＆lt;>应尽可能地在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>