Center form on page both vertically and horizontally

I would like to center a form on a page and I have managed to do that. I have an issue, though: when I resize the browser windows and the height decreases, I would like the form to stay below the navbar and the page to overflow and allow me to scroll, in order to see the rest of the form. Instead, it positions itself above the navbar.

I have tried to include the form in another container div, tried to used different position values, but I have not succeded to obtain what I want. Is there a simple way?

#navbar {
  background-color: blue;
  width: 100%;
  height: 50px;
  border: 1px solid black;
}

.test_form {
  /* Center the form on the page vertically */
  margin: 0 auto;
  /* Center both vertically and horizontally */
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /* Center both vertically and horizontally */
  min-width: 400px;
  width: 28vw;
  max-width: 550px;
  /* Form outline */
  padding: 1em;
  border: 2px solid #192D4D;
  border-radius: 2em;
}

@media only screen and (max-height: 500px) {
  .test_form {
    /* Center the form on the page vertically */
    margin: 0 auto;
    min-width: 400px;
    width: 28vw;
    max-width: 550px;
    /* Form outline */
    padding: 1em;
    border: 2px solid #192D4D;
    border-radius: 2em;
    /* Just to know when it switches */
    background-color: red;
  }
}

label {
  /* Uniform size & alignment */
  display: inline-block;
  width: 100px;
  text-align: center;
}

input,
textarea {
  /* To make sure that all text fields have the same font settings
     By default, textareas have a monospace font */
  font: 1em sans-serif;
  /* Uniform text field size */
  width: 100%;
  box-sizing: border-box;
  /* Match form field borders */
  border: 1px solid #999;
  background-color: #F1F9FF;
}

textarea {
  /* Align multiline text fields with their labels */
  vertical-align: top;
}

table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #192D4D;
  letter-spacing: 1px;
  font-size: 0, 8rem;
  text-align: center;
  background-color: #ADBEDA;
}

td,
th {
  border: 1px solid #5C6F8C;
  padding: 5px 10px;
  text-align: left;
}

.submit-button {
  margin-left: calc(1em + 2vw);
  min-width: 100px;
  width: 8vw;
  max-width: 150px;
}
<div id='navbar'>

</div>

<br>
<form class="test_form">
  <table border="1">
    <thead>
      <tr>
        <th colspan="2" scope="row">Table form</th>
      </tr>
    </thead>
    <tr>
      <th>asdasd</th>
      <td>asdad</td>
    </tr>
    <tr>
      <th>asdasd</th>
      <td><input value='asda'></td>
    </tr>
    <tr>
      <th>asdasd</th>
      <td>asdad</td>
    </tr>
    <tr>
      <th>asdasd</th>
      <td><textarea>asdads</textarea></td>
    </tr>
  </table>
  <br>
  <input class="submit-button" type="submit" value="Submit" />
</form>

Add position: static; and transform: none; to the rule for .test_form in the media query - this will put the element into the normal flow and reset any offsets caused by transform.

https://jsfiddle.net/0ed68aqo/

CSS: centering things, <style> .container { height: 200px; position: relative; border: 3px solid green; } . vertical-center { margin: 0; position: absolute; top: 50%; -ms-transform:� Page margins are the blank spaces between the worksheet data and the edges of the printed page. Top and bottom page margins can be used for such items, such as headers, footers and page numbers. Let’s take an example and understand what command should be applied to center worksheet both horizontally and vertically. I have data in range A1:B18.

from html&body, you have a few option to center X/Y your content without position:

flex possibility

body {
margin:0;
display:flex;
flex-direction:column;
height:100vh;
}

div {margin:auto;width:/* if needed*/;}

nav{background:lightgreen}
div {background:lightblue;}
<nav> navbar any height</nav>
<div>any content here of any size </div>

How To Center an Element Vertically, Often times, HTML developers are faced with a task of developing a login page where the form has to be horizontally and vertically aligned. Login Form Signup Form Checkout Form Contact Form Social Login Form Register .vertical-center How To Center Vertically AND Horizontally. Example <style>

You could use flexbox to center your form instead of using position and transform. It needs less code and in my experience it always worked, on all devices, unless you need support on 8+ years old browsers or internet explorer.

So, for some code, taking what you wrote i edited it like this and it's working for me

#navbar{
  background-color:blue;
  width:100%;
  height:50px;
  border:1px solid black;
}

.test_form {
    min-width: 400px;
    width: 28vw;
    max-width: 550px;
    /* Form outline */
    padding: 1em;
    border: 2px solid #192D4D;
    border-radius: 2em;
}

@media only screen and (max-height: 500px) {
.test_form {
    /* Center the form on the page vertically */
    margin: 0 auto;    
    min-width: 400px;
    width: 28vw;
    max-width: 550px;
    /* Form outline */
    padding: 1em;
    border: 2px solid #192D4D;
    border-radius: 2em;
    background-color:red;
    }
}


label {
    /* Uniform size & alignment */
    display: inline-block;
    width: 100px;
    text-align: center;
}

input, textarea {
    /* To make sure that all text fields have the same font settings
     By default, textareas have a monospace font */
    font: 1em sans-serif;

    /* Uniform text field size */
    width: 100%;
    box-sizing: border-box;

    /* Match form field borders */
    border: 1px solid #999;
    background-color:#F1F9FF;
}

textarea {
    /* Align multiline text fields with their labels */
    vertical-align: top;
}

table {
    width:100%;
    border-collapse: collapse;
    border: 2px solid #192D4D;
    letter-spacing: 1px;
    font-size: 0,8rem;
    text-align: center;
    background-color:#ADBEDA;
}

td, th {
    border: 1px solid #5C6F8C;
    padding: 5px 10px;
    text-align: left;
}

.submit-button {
    margin-left: calc(1em + 2vw);
    min-width:100px;
    width: 8vw;
    max-width:150px;
}

.flex{
    display: flex;
    align-items: center;
    justify-content: center;
        
}
<div id='navbar'>

</div>

<br>
<div class="flex">
  <form class="test_form">
    <table border="1">
      <thead>
        <tr><th colspan="2" scope="row">Table form</th></tr>
      </thead>
      <tr><th>asdasd</th><td>asdad</td></tr>
      <tr><th>asdasd</th><td><input value='asda'></td></tr>
      <tr><th>asdasd</th><td>asdad</td></tr>
      <tr><th>asdasd</th><td><textarea>asdads</textarea></td></tr>
    </table>
    <br>
    <input class ="submit-button" type="submit" value="Submit" />
  </form>

</div>

Tutorial: How to vertical center align a login form or container DIV , Centering an element with CSS has always been easy for some things, Text is very simple to center horizontally using the text-align property set Center both vertically and horizontally. Flexbox techniques to center vertically and horizontally can be combined to completely center an element in the page. Click the “Page Layout” tab. Click the “Page Setup” button in the lower-right corner of the “Page Setup” section of the “Page Layout” tab. On the “Page Setup” dialog box, click the “Layout” tab. In the “Page” section, select “Center” from the “Vertical alignment” drop-down list.

Contain <form> in <div>

<div class="container">
    <form class="test_form">
        .............................
    </form>
</div>

and I suggest to use only margin: [value] auto; to center. remove position: absolute and the complentary styles included in achieve a center postition

How to center an element with CSS, Centering elements horizontally is generally easier than vertically centering them . Flexbox is the most modern way to center things on the page, and makes designing How to Center Both Vertically and Horizontally. justify-content-md-center: Justifies content in the center of the page, can also be replaced with justify-content-sm-center or justify-content-lg-center to change the breakpoint. align-items-center: Centers the alignments of all items in a div. vh-100: Sets the height of the div to 100vh, or 100 "vertical height". This ensures that the div is

How to Center Things With Style in CSS, Vertical centering is little difficult than that. To do that, you can do the following stuff. html. <body>. To align text horizontally on a page, highlight the text you want to center. Next, click the “Center Alignment” icon in the “Paragraph” group of the “Home” tab. Alternatively, you can use the Ctrl+E keyboard shortcut. Your text will now be horizontally aligned.

Do we have a CSS property to center align a form vertically?, Centering of elements on a page, especially vertical centering, has been notoriously difficult to do in the past with CSS and we've had to� Center Vertically - Using position & transform If padding and line-height are not options, another solution is to use positioning and the transform property: I am vertically and horizontally centered.

Centering Things in CSS Using Flexbox, Now, something like vertical centering is effortless through different methods. This works even when both elements are of unknown height. setting the CSS display to table and table-cell will make screen readers interpret it� Quick Summary – How to Center Worksheet in Excel 2010. Click the Page Layout tab. Select the Margins button. Choose the Custom Margins option. Click the box to the left or Horizontally and/or Vertically. For additional information and pictures, continue to the section below. Print Excel 2010 Spreadsheet in the Middle of the Page

Comments
  • don't use table for layout. Take a look to flexbox