How do I center this form in css

Question

I have tried everything   I cannot get this centered on the screen   I am using ie 9 but it does the same in chrome   It just sits on the left of the webpage   Thank you for any help    lt style type  text css  gt   body       margin 50px 0px  padding 0px      text-align center      align center    label input    display  block   width  150px   float  left   margin-bottom  10px     label    text-align  right   width  75px   padding-right  20px     br    clear  left            lt  style gt   lt  head gt     lt body gt     lt form name  Form1   action  mypage asp  method  get  gt     lt label for  name  gt Name lt  label gt    lt input id  name  name  name  gt  lt br gt     lt label for  address  gt Address lt  label gt    lt input id  address  name  address  gt  lt br gt     lt label for  city  gt City lt  label gt    lt input id  city  name  city  gt  lt br gt    lt input type  submit  name  submit  id  submit  value  submit  class  button    gt    lt  form gt   lt  body gt

User · Answer

You can use the following CSS to center the form  note that it is important to set the width to something that isn  t  auto  for this to work    form      margin-left auto     margin-right auto     width 100px

User · Answer

Wrap your form in a div  Set the div s display to block and text-align to center  this will center the contained form   Set the form s display to inline-block  auto-sizes to content   left and right margins to auto  centers it horizontally   and text-align to left  or else its children will be center-aligned too     HTML    lt div class  form  gt       lt form name  Form1  action  mypage asp  method  get  gt                   lt  form gt   lt  div gt    CSS   div form       display  block      text-align  center    form       display  inline-block      margin-left  auto      margin-right  auto      text-align  left

User · Answer

You can try  form       margin-left  25       margin-right 25       width  50       Or   form       margin-left  15       margin-right 15       width  70

User · Answer

Another solution  without a wrapper  would be to set the form to display  table  which would make it act like a table so it would have the width of its largest child  and then apply margin  0 auto to center it  form       display  table      margin  0 auto     Credit goes to  https   stackoverflow com a 49378738 7841955

User · Answer

body   text-align  center            center all items within body  this property is inherited    body  gt      text-align  left            left-align the CONTENTS all items within body  additionally         you can add this text-align  left property to all elements         manually    form   display  inline-block            reduces the width of the form to only what is necessary         http   jsfiddle net sqdBr 4   Works  amp  tested in Chrome IE FF

User · Answer

Another way   x000D   x000D  body   x000D      text-align  center  x000D    x000D  form   x000D      display  inline-block  x000D    x000D   lt body gt  x000D     lt form gt  x000D       lt input type  text  value  abc  gt  x000D     lt  form gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

I css I got no idea but I made that just by centering the form in html something like this   in css   form principal  width 12em       form principal label   float left  display block  clear both  padding 3px   form principal input   float left  width 8em   form principal button clear both  width 130px  height 50px  margin-top 8px     then in html    lt center gt  lt form class  principal  method  POST  gt   lt fieldset gt   lt p gt  lt label for  username  gt User lt  label gt  lt input id  username  type  text  name  username    gt   lt p gt  lt label for  password  gt Password lt  label gt  lt input id  password  type  password  name  password    gt  lt  p gt   lt button gt Log in lt  button gt   lt  fieldset gt   lt  form gt  lt  center gt    This will center the form  and the content will be in the left of the centered form

User · Answer

i dont know if the full resolution has been made for this yet  i know that from doing a 2 column page with fixed left side bar  to get a contact us form centered on my page i put the following       form    width  100    margin-left  auto   margin-right  auto   display  inline-block       this worked for me so thought id throw in my resolution to the same problem

User · Answer

Try adding this to your css   form   width 985px  margin 0 auto     and add width 100  to the body tag  Then put    lt div class  form  gt    before the  tag

User · Answer

x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D       lt title gt Private lt  title gt  x000D   x000D       lt  -- local links -- gt  x000D   lt style gt  x000D   x000D   x000D  body  x000D      background-color  6e6969  x000D      text-align center  x000D    x000D  body  form wrapper  x000D   x000D      display inline-block  x000D      background-color   fff  x000D      border-radius  5px  x000D      height  auto  x000D      padding  15px 18px  x000D      margin  10  auto  x000D      margin-left  auto  x000D      margin-right  auto  x000D     x000D   lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D       lt div class    form wrapper  gt  x000D           lt form method  post  action  function php  gt  x000D               lt h1 class    formHeading  gt Admin login form lt  h1 gt  x000D               lt input type    text  name    username  id    username placeholder    Enter Username  required    required  gt  x000D               lt input type    password  name    password  id     password  placeholder    Enter password  required    required  gt  x000D               lt button type    submit   gt Login lt  button gt  x000D               lt a href       gt  froget password  lt  a gt  x000D               lt a href       gt  lt span gt   lt  span gt help lt  a gt  x000D           lt  form gt  x000D   x000D       lt  div gt  x000D   lt  body gt  x000D   x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Normally  if you look up any software issue on stackoverflow  you quickly find a clear answer  But in CSS  even something as simple as  center a form  leads to a long discussion  and lots of failed solutions   Correction  orfdorf s solution  above  works

User · Answer

x000D   x000D  body   x000D      text-align  center  x000D    x000D  form   x000D      width 90   x000D      background-color   c0d7f8  x000D    x000D   lt body gt  x000D     lt form gt  x000D       lt input type  text  value  abc  gt  x000D     lt  form gt  x000D   lt  body gt  x000D   x000D   x000D

[css] How do I center this form in css?

Examples related to css