html - 如何使用css从顶部和底部对齐div内中心的文本

Question

在处理 div 标签时，我在 css adjust 中遇到问题文本应该从顶部和底部居中，如果文本很大并且当最小化浏览器窗口时 iot 应该响应但是没有满足这个期望 这是js fiddle http://jsfiddle.net/ou4n2gxy/3/

(1 文本应从顶部、底部、右侧、左侧居中 (2 当最小化浏览器窗口时它应该得到响应意味着它不应该剪切文本的某些部分

#wrapper {
  display: block;
  width: 90%;
  margin: auto;
  border: 1px solid grey;
  padding: 10px;
  width: 60%;
  height: 80px;
  margin: auto;
  vertical-align: middle;
  display: table-cell;
}

#content {
  display: block;
  width: 80%;
  margin: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row ">
  <div class="col-sm-2" id="wrapper">
    <div id="content">Lorem Ipsum is simply dummy text </div>
  </div>
  <div class="col-sm-2" id="wrapper">
    <div id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</div>
  </div>

  <div class="col-sm-2" id="wrapper">
    <div id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</div>
  </div>

  <div class="col-sm-2" id="wrapper">
    <div id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</div>
  </div>
</div>

Answer 1

你的 CSS 有点乱；您有两个具有不同值的 width 属性，因此浏览器不确定要遵循什么。您还有两个 margin: auto。

我希望这正是您想要实现的目标:

#wrapper{
  display: block;
  width:90%;
  margin: auto;
  border: 1px solid grey;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#content{
    width:80%;       
}

我删除了 #content 中的 display: block 和 margin: auto 因为默认显示的是 div 是 block 并且因为它在框内居中，所以不需要 margin: auto。当您调整浏览器大小时，它会换行而不是显示溢出。