Home/ Questions/Q 8597053
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T00:49:34+00:00

In the following document, is it possible to center the inner div horizontally, or

  • 0

In the following document, is it possible to center the inner div horizontally, or in some other way make text both V and H centered in outer class div?

Some constraints (sorry for not specifying it at start):
1. No fixed width should be specified, since otherwise solution is trivial;
2. No JavaScript, just pure CSS and HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>the title</title>
    <style>

        div.outer {
            /* ? */
        }

        div.inner {
            display: table-cell;
            min-height: 100px;
            vertical-align: middle;
        }

    </style>
  </head>
  <body>
    <div class="outer">
        <div class="inner">
            <p>Vertically centered text. How to center it horizontally?</p>
        </div>
    <div>
  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this:

    .outer {
   display: table;
   width: 100%;
}
.inner {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

    demo

    It uses no JavaScript and it doesn’t require that you fix a width/ height/ line-height.

    • 0