How to Align a div middle inside of a div

Question

I was create a div and another div inside of the div. I want these dot lines ... should be middle of the parent div (Horizontally and Vertically). Please help me. Thank you.

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

At first, you dont need another div for that. Use text-align:center + line-height + padding — Jonas Wilms, Aug 14 '16 at 10:24
If you still need a div use left:50%; margin-left: halfwidth in px — Jonas Wilms, Aug 14 '16 at 10:24

score 1 · Answer 1 · answered Aug 14 '16 at 10:32

1

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.

answered Aug 14 '16 at 10:32

HiDeoo

10,353
8
47
47

It's working fine. Thank you. – Melbin Mathai Aug 14 '16 at 10:40

Mustapha Larhrouch · Answer 2 · 2016-08-14T10:41:33.180

1

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/

edited Aug 14 '16 at 10:41

answered Aug 14 '16 at 10:32

Mustapha Larhrouch

3,373
3
14
28

But this is not working. – Melbin Mathai Aug 14 '16 at 10:38
i modified the code you need to add vertical-align: middle to parent element – Mustapha Larhrouch Aug 14 '16 at 10:41

How to Align a div middle inside of a div

2 Answers2