just using CSS, can I center a sentence both horizontally and vertically in a window

I know how to do it using Javascript, but just wonder if it is possible to use only CSS to do it. The task is to center a word or a sentence in the middle of window (viewport). So it is to center horizontally and vertically, on the current window (viewport).

 

did you try margin: auto;

it's working in post cases to center divs or sentences

 

You might be able to try,

margin: 0 auto;
vertical-align: middle;

it usually works for me.

 

To do that in CSS: margin: auto;

Let me know

 

hm... the main challenge is to center it "vertically"... and not on the document but on the viewport (the window's canvas area size, rather than the document...)...

 

Yesh you'll need Paul's trick, because CSS SUCKS when it comes to vertical centering.
http://www.pmob.co.uk/temp/vertical-align11.htm

An extra container, extra BS code for IE, and you have something that's purely CSS.

Another option to to wrap the page in one big table with a single cell and use vertical-align: middle. If this is less code, then use it. One of those few reasons to use a layout table (and again, only if it matters that it's less code than a few extra containers and some IE-specific hacks).

 

Aw, c'mon. CSS is OK, it's IE that sucks.

Definitely a PITA. I'm not fond of Paul's h-centering. I updated a May, 2006 demo to accommodate IE7 (and complement present 'branding"). See vertically center page with css.

A sane use of a single-celled table. It's one I eschew for purely pig-headed reasons.

cheers,

gary

 

If a box's width can be determined by browser window width (so children can has width and margin: 0 auto then I don't see why the height of an element (well, at least the body) can't be determined in the same manner and use of top-bottom auto margins on a child with specified height.

Or, making some other version of vertical-align: middle for boxes/blocks when they were fleshing out the spec.

Or adding it to the spec now?

So long as parent as set height and child has set height, auto-margins should be made to work. I think changing the display state of parent to table is hacky. Display: table should mean, I want this box act like a table. Vertical-align doesn't feel like some special thing that should only belong to tables, print aside.

I like your demo more than Paul's though, I wish he would update his site more (he keeps saying he's gonna, but you know, no time...)

Bookmarked.

 

You make some good points. I can't help but feel (See? No rational arguments here.) that the inherent differences between the way height and width auto work throws a wrench (or sabot) into the works.

To center vertically, you'd need to set the height of the parent before you could use margin to center the child. Setting the height would lead to overflow issues. Min-height might be used, but again, height works differently from width.

I've no doubt these problems could be overcome; I just wonder if it's worth the effort when {display: table-cell; vertical-align: xxx;} does the job.

re pmob updates: Don't I know. I am a year behind on my own plans to rework and update my pages from a now-defunct site.

Glad you like the demo. That's one example of letting things slide and not revising 'til a specific need arises.

cheers,

gary