Div aligned in the middle of another div

Question

I am trying to make a layout with a div which have some text in the middle, and bellow that text, 4 social media icons. So I have made a div with another div inside of it, but I can't center the last one vertically...

So, how do I center div "sec10_content" in the middle of div "section10"?

I know that this question has been asked before, but I can't manage the code in my case...

Here's the code:

HTML:

<div class="section10">
            <div class="sec10_content">
            </div>
        </div>

CSS:

.section10
{
    width:100%;
    height:320px;
    vertical-align: middle;
    background-color:#222222;
}
.sec10_content
{
    width: 50%;
    height: 100px;
    margin: auto;
    border: 1px solid white;
}

Possible duplicate of http://stackoverflow.com/q/2939914/1518921 — Protomen, Nov 02 '14 at 22:54
I specified that I have tried more solutions but I didn't managed to make it works and I'm almost out of time for my project so I needed help :) — Valeriu92, Nov 02 '14 at 22:59
Besides the answer chosen by the OP of other questions, there are answers that are not chosen and they can be more useful than the one chosen by OP, so you should see all answers. The answer @user1563056 is very similar to that found several answers right here on "StackOverflow". So to me its sounds like a duplicate question. Thank you for understanding and wish you success in your project. — Protomen, Nov 02 '14 at 23:07
You're right, but I really didn't have the patience and time to search for an answer which can solve my problem, thanks :) — Valeriu92, Nov 02 '14 at 23:09
I found three answers in less than 2 minutes, for me it does not justify creating duplicates, that here is a community and not a support service. But that's just my opinion. — Protomen, Nov 02 '14 at 23:14

score 3 · Accepted Answer · edited Nov 02 '14 at 22:47

3

I think that adding display inline-flex would work.

.section10
{
    width:100%;
    height:320px;
    vertical-align: middle;
    background-color:#222222;
    display: inline-flex;
}

edited Nov 02 '14 at 22:47

dersvenhesse

6,276
2
32
53

answered Nov 02 '14 at 22:46

user1563056

101
3

score 1 · Answer 2 · answered Nov 02 '14 at 22:37

1

The way I like is to add these 3 lines of css on inner div

 position: relative;
 top: 50%;
 transform: translateY(-50%);

See JSFiddle. Source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

answered Nov 02 '14 at 22:37

Bruno Calza

2,732
2
23
25

1

Nice. But note it's IE8+ and current Safari 8 still needs vendor prefixes which increases the amount of lines. ;) – dersvenhesse Nov 02 '14 at 22:43

Div aligned in the middle of another div

2 Answers2