如何垂直居中div内div

这个问题在这里已经有了答案：

如何垂直居中所有浏览器的div？ 41个答案

垂直居中一个div在另一个div 23的答案

---

Flexbox拯救：

.outer { 
  border:3px solid black; 
  height:300px;
  
  /* Just set up the container element to use flexbox */
  display:flex;
  justify-content:center;
  align-items:center;
}
.inner { border:3px dashed green; height:100px; width:100px; }

<div class="outer">
  <div class="inner"></div>
</div>

---

.box {
  position: relative;
  width: 250px;
  height: 250px;
  background-color: #E4E4E4;
  margin: 30px;
}
.box .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 150px;
}
.text.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="box">
  <div class="text ellipsis">lorem ipsum dolor sit amet</div>
</div>

链接地址: http://www.djcxy.com/p/41495.html

上一篇: How to center vertically div inside div

下一篇: How do I center the div vertically?