Member Avatar for niche1

How do I center this form so it stays centered when I adjust the size of my browser window?

<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>

Thank-you.

  • 4 Contributors
  • 5 Replies
  • 286 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by djzia

Dani AI

Generated

Quick, practical update that builds on the replies from , and : their wrapper/table ideas will center the form, but they either rely on fixed widths or use table-layout. For a more robust, responsive result that stays centered as the browser resizes, use modern layout tools that adapt to content and viewport size (flexbox or grid), or an absolute+transform trick when you need exact centering.

A compact flexbox approach (horizontal centering; change align-items to center to also vertically center):

html, body { height: 100%; margin: 0; }
body {
  display: flex;
  justify-content: center;    /* horizontal */
  align-items: flex-start;    /* use center to vertically center */
  padding: 1rem;
}

form {
  width: min(520px, 95%);     /* responsive max width */
  box-sizing: border-box;
  padding: 0.5rem;
}

If you prefer grid or need two-axis centering, grid is even shorter:

.container { display: grid; place-items: center; min-height: 100vh; }

<!-- wrap the form with <div class="container"> -->

For a fixed-position, viewport-centered option (works when the form must remain exactly centered regardless of flow):

.centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, 95%);
}

Troubleshooting notes: remove default body margin, ensure the form is not styled as display:inline, and use box-sizing: border-box so padding does not break the desired width. Avoid using table markup purely for layout. If supporting very old browsers, fall back to a simple fixed-width wrapper; otherwise prefer flexbox/grid for predictable, responsive centering.

Recommended Answers

All 5 Replies

Member Avatar for niche1

Here's what I did and it works.

<style type="text/css">
div {text-align:right}
</style>

<div>
<table cellpadding="5">
<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>
</table>
</div>
Member Avatar for huliaa

good job! but where is your 4?

Member Avatar for ko ko

Using margin 'auto' property can stay element in center. Don't use 'text-align' property to center the element. 'text-align' is only for text, not the element. You may also use like

CSS:
p {
     text-align: center
    }

HTML:
<p>This text will go to center</p>

Or use table cell align attribute. <td align="center">Align center cell</td> In your process. You could also use.

div {
     margin: 0 auto;
     width: 400px /* auto margin can only apply with exceed width, if not it will ignore it */
     }

I hope it will a little support for you.

Member Avatar for ko ko

Using margin 'auto' property can stay element in center. Don't use 'text-align' property to center the element. 'text-align' is only for text, not the element. You may also use like

CSS:
p {
     text-align: center
    }

HTML:
<p>This text will go to center</p>

Or use table cell align attribute.

<td align="center">Align center cell</td>

In your process. You could also use.

div {
     margin: 0 auto;
     width: 400px /* auto margin can only apply with exceed width, if not it will ignore it */
     }

I hope it will a little support for you.

Member Avatar for djzia

simple. just wrap it with a div tag

<div id="wrap">
1.
<form>
2.
First name:
3.
<input type="text" name="firstname" />
4.
<br />
5.
Last name:
6.
<input type="text" name="lastname" />
7.
</form>
</div>

and insert this in css

#wrap{
width: (width of form)px;
margin: auto;
}

Edited by djzia because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.