Home/ Questions/Q 8720383
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T07:01:43+00:00

Is there really no way to center an absolutely/relatively positioned element without javascript? I

  • 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;}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/)

    • 0