How to center vertically div inside div

This question already has an answer here:

How to vertically center a div for all browsers? 41 answers

Vertically centering a div inside another div 23 answers

---

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/41496.html

上一篇: 将div水平和垂直居中对齐页面（响应）

下一篇: 如何垂直居中div内div