0

Is there really no way to center an absolutely/relatively positioned element without javascript? I know it's easy if the width of the element is dependable. Is there no CSS solution? Am I forced to resort to javascript?

<body><div class="parent"><div class="child">This stuff changes</div></div></body>

.child{margin:auto;position:absolute;left:50%} // this will center the left edge
.parent{width:800px;height:430px;margin:auto;overflow:hidden;}
Scott Hillson
  • 900
  • 1
  • 12
  • 30

1 Answers1

4

How about:

.child {
    margin-left: auto;
    margin-right: auto;
    display: table;
}

Full demo html:

<html>
<head>
    <style type="text/css" media="screen">
    .child {
        margin-left: auto;
        margin-right: auto;
        display: table;
    }
    </style>
</head>
<body>
    <!-- middle marker to test alignment -->
    <table width="100%"><tr><td align="center" width="100%">|</td></tr></table>
    <!-- actual thing we're trying to center -->
    <div class="parent">
        <div class="child">123456789|987654321</div>
    </div>
</body>

(source: http://solstice.co.il/blog/2008-02-26/horizontally-centering-content-dynamic-width-css)

For vertical centring also:

<html>
<head>
    <style type="text/css" media="screen">
    .parent {
        width:800px;
        height:430px;
        margin:auto;
        overflow:hidden;
        border:2px solid cyan;
        border-radius:25px;
        -moz-border-radius:25px; /* Firefox 3.6 and earlier */
    }
    .evilStepMother { /* i.e. comes between the parent and child */
        display: table-cell;
        vertical-align: middle;
        width: 800px; /* i.e. matches parent */
        height: 430px; /* i.e. matches parent */
        border:2px solid green;
        border-radius:25px;
        -moz-border-radius:25px; /* Firefox 3.6 and earlier */
    }
    .child {
        margin: auto;
        display: table;
        border:2px solid red;
        border-radius:25px;
        -moz-border-radius:25px; /* Firefox 3.6 and earlier */
    }
    </style>
</head>
<body>
    <!-- middle marker to test alignment -->
    <table width="100%"><tr><td align="center" width="100%">|</td></tr></table>
    <!-- actual thing we're trying to center -->
    <div class="parent"><div class="evilStepMother">
        <div class="child">123456789|987654321</div>
    </div></div>
</body>

NB: the borders are just there to make it easier to see how things are laid out; the curvy corners are just nicer.

(source: http://blog.themeforest.net/tutorials/vertical-centering-with-css/)

JohnLBevan
  • 22,735
  • 13
  • 96
  • 178