How to Align a div middle inside of a div

This question already has an answer here:

Vertically centering a div inside another div 23 answers

---

One possibility (and there are many) could be to use CSS Flexible Box Layout.

You can use the justify-content property to define aligment along the main axis and the align-items property to define how flex items are laid out along the cross axis.

You .test container would looks like this:

.test {
  display: flex;
  justify-content: center;
  align-items: center;
}

You can check an example on this JSFiddle.

---

you have to use table-cell on your parent element and inline-block on the child and add vertical-align: middle to parent element:

<div class = "test" style = "width: 32px; height: 22px; display: table-cell; border: 1px solid; border-radius: 5px; text-align: center; vertical-align: middle;">
    <div style = "display: inline-block;">...</div>
</div>

https://jsfiddle.net/Lkfr6ar1/

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

上一篇: 如何把ap放在div的中心？

下一篇: 如何对齐div中的div中间