使用CSS +

<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

看这里

1 -设置CSS在父div显示:flex;

2 -在父div上设置CSS为flex-direction: column;注意，这将使该div行中的所有内容从上到下。如果父div只包含子div而不包含其他div，那么这样做效果最好。

3 -在父div上设置CSS为justify-content: center;

下面是CSS的一个例子:

.parentDivClass { 显示:flex; flex-direction:列; justify-content:中心; ｝

如果你需要在链接中居中显示文本，这可以做到:

div { 显示:flex; 宽度:200 px; 身高:80 px; 背景颜色:黄色; ｝ 一个{ 显示:flex; 对齐项目:中心; justify-content:中心; text-align:中心;/*只对多行重要*/ 填充:0 20px; 背景颜色:银色; 边框:2px纯蓝色; ｝ < div > 文本< a href = " # " > < / > <a href="#">文本与两行</a> < / div >

结果:

CODE

HTML:

<div class="flex-container">
  <div class="rows">

    <div class="row">
      <span class="flex-item">1</span>
    </div>
    <div class="row">
      <span class="flex-item">2</span>
    </div>
    <div class="row">
      <span class="flex-item">3</span>
    </div>
    <div class="row">
      <span class="flex-item">4</span>
    </div>

  </div>  
</div>

CSS:

html, body {
  height: 100%;  
}

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.rows {
  display: flex;
  flex-direction: column;
}

其中flex-container div用于垂直和水平居中你的行div，和行div用于分组你的“项目”，并在一个基于列的顺序。

希望这能有所帮助。

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

还:flex;对于它的容器和边缘:auto;因为它的项目工作完美。

注意:你必须设置宽度和高度才能看到效果。

#{容器 宽度:100%;/*宽度需要设置*/ 身高:150 px;/*高度需要设置*/ 显示:flex; ｝ .item { 保证金:汽车;/*这些将使项目在中心*/ background - color: # CCC; ｝ < div id = "容器" > 中心< div class = "项目" > < / div > < / div >