Center a div on HTML relatively

Question

I have the following div with list content. How to center it on an HTML page relative taking the size of the content of the div into consideration?

HTML

    <div id="container">
        <dl>
            <dt>Item 1</dt>
            <dt>Item 2</dt>
            <dt>Item 3</dt>
            <dt>Item 4</dt>
        </dl>
    </div>

I have the following css which works fine to position the div horizontally but it doesn't work for vertical center position:

    div {
        position: absolute;
        text-align: center;
        width: 50%;
        left: 25%;
        top: 50%;
        border-width: 4px;
        border-style: groove;
        vertical-align: middle;
    }

Since you're using width: 50% it's not relative to the size of the content, right? — TheFrozenOne, Sep 15 '14 at 13:54
Yes you are right. transform: translateY(-50%); works for vertical center position. How to achieve the same effect horizontally? Thanks. — Kok How Teh, Sep 15 '14 at 14:01

Anonymous · Accepted Answer · 2014-09-15T14:02:58.000

3

You could do it by set transform: translateY(-50%); to div.

JSfiddle - DEMO

HTML:

<body>
    <div id="container">
        <dl>
            <dt>Item 1</dt>
            <dt>Item 2</dt>
            <dt>Item 3</dt>
            <dt>Item 4</dt>
        </dl>
    </div>
</body>

CSS:

div {
    position: absolute;
    text-align: center;
    width: 50%;
    left: 25%;
    top: 50%;
    border-width: 4px;
    border-style: groove;
    transform: translateY(-50%);
}

Solution 2:

Set transform: translate(-50%, -50%); to center the div horizontally and vertically.

JSfiddle - DEMO

div {
    position: absolute;
    text-align: center;
    width: 50%;
    left: 50%;
    top: 50%;
    border-width: 4px;
    border-style: groove;
    transform: translate(-50%, -50%);
}

edited Sep 15 '14 at 14:02

answered Sep 15 '14 at 13:54

Anonymous

10,002
3
23
39

It works. How to achieve the same effect horizontally? Thanks. – Kok How Teh Sep 15 '14 at 14:02
@KokHowTeh but Its center even if you remove the width - http://jsfiddle.net/ygnbgL7k/14/ – Anonymous Sep 15 '14 at 14:07
@KokHowTeh I answered the question as per your HTML and CSS codes and if you have different code then please provide me and look at my previous answer that may also help you - http://stackoverflow.com/questions/25834692/center-div-vertically-and-horizontally-without-defined-height/25834864#25834864 and you could also use display table method like that answer - http://stackoverflow.com/questions/25832874/how-to-center-horizontally-and-vertically-a-select-box/25832999#25832999 – Anonymous Sep 15 '14 at 14:12
@Melody, I don't have a different code. The div appears to occupy the left 50% left of the page horizontally which is not what I want. Please advise. Thanks. – Kok How Teh Sep 15 '14 at 14:15
1

@Melody, it works now. I missed the "left: 50%;" which was 25% orignally. Thank you! – Kok How Teh Sep 15 '14 at 14:17
@KokHowTeh are you using this line? - `transform: translate(-50%, -50%);` - http://jsfiddle.net/ygnbgL7k/12/ and this is output - http://oi58.tinypic.com/2w65vmf.jpg – Anonymous Sep 15 '14 at 14:17

score 0 · Answer 2 · answered Sep 15 '14 at 14:22

0

You can try the following code.

 html,body{height: 100%;}

#container {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
width: 100%;
}

use vendor prefix for browser support

answered Sep 15 '14 at 14:22

Bir

794
1
15
31

Center a div on HTML relatively

2 Answers2