Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How to Center in CSS

howtocenterincss.com

Post reply on HN
Print view View original

201–210 of 297 posts

Re: How to Center in CSS

#201

Post by nailer »

yoran wrote: post #188
nailer wrote: post #140

Earlier quoted context omitted.

Add Autoprefoxer in your build process and never type them again.

Or use Bourbon mixins ( http://bourbon.io/docs/ ) if you use SASS.

SASS mixins are great, but Autoprefixer is better for prefixes: it looks the same as writing actual CSS (just with no prefixes) and has no cognitive overhead during editing. Compare the Bourbon mixin:

    @include background(linear-gradient(red, green) left repeat);
to autoprefixer:

    background: linear-gradient(red, green) left repeat;

Re: How to Center in CSS

#203

Post by peterjmag »

carsongross wrote: post #41

I am reminded of one of my favorite tweets of all time: “The easiest way to vertically center something in CSS is to close your laptop and go to the bar.” - @jakeboxer https://twitter.com/thedaniel/status/414123893830336513

This one cracked me up too:

    “How to choose between rem and em”
    
    1. question css
    2. question your life
    3. throw away laptop
    4. scamper into forest
https://twitter.com/iamdevloper/status/587651586350002176

Re: How to Center in CSS

#204

Post by rimantas »

TeMPOraL wrote: post #182
rimantas wrote: post #145

Earlier quoted context omitted.

I think CSS Zen Garden still exists...

And this is absolutely the only place where "separation of content and layout" works. In real world, layout often is a part of content - but instead of accepting that, a lot of developers like to proclaim that their code is soo semantic, and the metric ton of grid layout divs in their "content" is not tables in disguise, but definitely has some important semantic meaning... Seriously, I don't know what's more broken…

It worked perfectly fine for me from ~2004 and forward. I guess the bigger problem is that web tech is considered somehow not important so lots of developers did not really bother to unserstand CSS. I think around 2005 we had a golden times of the web. It went downhill since, sadly. Prolifereation of one-page web apps, stupid desire "to win mobile", mindless spawning of all kinds of frameworks turned out into complete mess :(

Re: How to Center in CSS

#206

Post by kowdermeister »

rivo wrote: post #200

Unfortunately, this page does not give a solution to a long-standing centering problem I've had: Given a single DIV of unknown width and height, how do I center it in the middle of the screen (floating, i.e. fixed)? Note the "single DIV" so no wrapping in additional container DIVs! The only approximation I could find was this: .mydiv { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); } This, how…

Flexbox does it for you. http://codepen.io/kowdermeister/pen/mJbGdr

Re: How to Center in CSS

#207

Post by Nilzor »

nailer wrote: post #201
yoran wrote: post #188

Earlier quoted context omitted.

Or use Bourbon mixins ( http://bourbon.io/docs/ ) if you use SASS.

SASS mixins are great, but Autoprefixer is better for prefixes: it looks the same as writing actual CSS (just with no prefixes) and has no cognitive overhead during editing. Compare the Bourbon mixin: @include background(linear-gradient(red, green) left repeat); to autoprefixer: background: linear-gradient(red, green) left repeat;

AAAAaaand we're back to 7 solutions to a simple problem

Re: How to Center in CSS

#208

Post by runarberg »

jimmcslim wrote: post #36
DiThi wrote: post #27

As others said, flexbox is a complete replacement for all layour hacks in CSS. This site helped me understand flexbox: http://flexboxin5.com/ Browser support: http://caniuse.com/#feat=flexbox

I've understood that Flexbox is what you should use for 'small layout' (controls, etc) but ultimately we should be using the new CSS grid module for 'large layout' (pages). http://dev.w3.org/csswg/css-grid/ Of course, it might be a while until there is broad browser support! http://caniuse.com/#feat=css-grid

I'd think you should use flexbox for what it's good at --calculating and distributing the available space on it's children-- and grid for what it's good at --enforcing strict and precise layout outlines--.

Re: How to Center in CSS

#209

Post by TeMPOraL »

rimantas wrote: post #204
TeMPOraL wrote: post #182

Earlier quoted context omitted.

And this is absolutely the only place where "separation of content and layout" works. In real world, layout often is a part of content - but instead of accepting that, a lot of developers like to proclaim that their code is soo semantic, and the metric ton of grid layout divs in their "content" is not tables in disguise, but definitely has some important semantic meaning... Seriously, I don't know what's more broken…

It worked perfectly fine for me from ~2004 and forward. I guess the bigger problem is that web tech is considered somehow not important so lots of developers did not really bother to unserstand CSS. I think around 2005 we had a golden times of the web. It went downhill since, sadly. Prolifereation of one-page web apps, stupid desire "to win mobile", mindless spawning of all kinds of frameworks turned out into complet…

Funnily, 2005 was the time when people were misunderstanding JavaScript. I still have nightmares from all those animated snowflakes and rainbows following my mouse cursor, or date calculators embedded on every other page for no reason except to show off...

Re: How to Center in CSS

#210

Post by yAnonymous »

scotty79 wrote: post #196
yAnonymous wrote: post #176

Earlier quoted context omitted.

It's not the site that's broken, but Safari.

What's broken is not Safari but people who buy Macs. ... I can't go any deeper. Still I'd like my site to look good to a meaningful market share.

True, but I wouldn't say 4% is a meaningful market share, so fuck Safari. It's the new Internet Explorer.

Leaving the sites broken in Safari (and maybe adding a notice that explains why it's broken) also helps keeping it at 4%.

Post reply on HN