You can apply this CSS to the inner <div>
:
#inner {
width: 50%;
margin: 0 auto;
}
Of course, you don't have to set the width
to 50%
. Any width less than the containing <div>
will work. The margin: 0 auto
is what does the actual centering.
If you are targeting Internet Explorer 8 (and later), it might be better to have this instead:
#inner {
display: table;
margin: 0 auto;
}
It will make the inner element center horizontally and it works without setting a specific width
.
Working example here:
#inner {
display: table;
margin: 0 auto;
border: 1px solid black;
}
#outer {
border: 1px solid red;
width:100%
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
EDIT
With flexbox
it is very easy to style the div horizontally and vertically centered.
#inner {
border: 1px solid black;
}
#outer {
border: 1px solid red;
width:100%;
display: flex;
justify-content: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
To align the div vertically centered, use the property align-items: center
.
I'd like to add my .02 here. It's not 100% bulletproof, but I think it's good enough.
The problem, for me, with the preferred example of putting up some sort of "this site doesn't work so well without Javascript" message is that you then need to make sure that your site works okay without Javascript. And once you've started down that road, then you start realizing that the site should be bulletproof with JS turned off, and that's a whole big chunk of additional work.
So, what you really want is a "redirection" to a page that says "turn on JS, silly". But, of course, you can't reliably do meta redirections. So, here's the suggestion:
<noscript>
<style type="text/css">
.pagecontainer {display:none;}
</style>
<div class="noscriptmsg">
You don't have javascript enabled. Good luck with that.
</div>
</noscript>
...where all of the content in your site is wrapped with a div of class "pagecontainer". The CSS inside the noscript tag will then hide all of your page content, and instead display whatever "no JS" message you want to show. This is actually what Gmail appears to do...and if it's good enough for Google, it's good enough for my little site.
Best Answer
UPDATE for 2017: Looks like the answer from Katie has more up-to-date information than mine. Future readers: give your up-votes to her answer.
This is a great question and one for which documentation is surprisingly hard to come by. Actually, in many cases you will find that the Chrome Autofill functionality "just works." For example, the following snippet of html produces a form which, at least for me (Chrome v. 18), is automatically filled after clicking in the first field:
However, this answer is unsatisfactory, as it leaves the solution in the realm of "magic." Digging deeper I learned that Chrome (and other autofill-enabled browsers) primarily rely on contextual clues to determine the type of data that should be filled into form elements. Examples of such contextual clues include the
name
of an input element, the text surrounding the element, and any placeholder text.Recently, however, the Chrome team acknowledged that this is an unsatisfactory solution, and they have begun pressing for standardization in this matter. A very informative post from the Google Webmasters group recently discussed this issue, explaining:
(The "standards" they refer to is a more recent verion of the spec mentioned in Avalanchis' answer above.)
The Google post goes on to describe their proposed solution (which is met by significant criticism in the comments of the post). They propose the use of a new attribute for this purpose:
...where the
x-
stands for "experimental" and will be removed if & when this becomes a standard. Read the post for more details, or if you want to dig deeper, you will find a more complete explanation of the proposal on the whatwg wiki.UPDATE: As pointed out in these insightful answers, all the regular expressions Chrome uses to identify/recognize common fields can be found in
autofill_regex_constants.cc.utf8
. So to answer the original question, just make sure the names for your html fields get matched by these expressions. Some examples include:"first.*name|initials|fname|first$"
"last.*name|lname|surname|last$|secondname|family.*name"
"e.?mail"
"address.*line|address1|addr1|street"
"zip|postal|post.*code|pcode|^1z$"