Vertically Align Elements Using CSS3 TranslateY

Saw an interesting post on reddit yesterday, it was in r/askreddit. The question was along the lines of “What question do you ask someone in your industry to immediately tell if they are faking it?” One of the higher voted comments was “How do you vertically align an element?” The answer was using transformY. I’ve seen a lot of methods that were ridiculous but it appears this is the common way to do it now. Using position you can set an element to 50% of it’s parents height but the axis is based on the top of the element. By adding a -50% transformY it will bump the element up so the middle is aligned to the middle of the parent. It’s beautiful!

This box is vertically aligned.
Can you tell?

<div class='tyex-container'>
<div class='tyex-valign'>
This box is vertically aligned.
Can you tell?
</div>
</div>
<style type='text/css'>
.tyex-container {
height:300px;
position:relative;
border:#ccc solid 1px;
}
.tyex-valign {
position:relative;
top:50%;
-webkit-transform:translateY(-50%); /* added prefixes, thanks @isotrope */
-ms-transform:translateY(-50%);
transform:translateY(-50%);
background:#ccc;
}
</style>

It’s 3:09AM

Sleep is something we take for granted.  I tried.  My wife and I watched that horrible Robin Hood movie with Kevin Costner.  It’s soooo bad. Which makes me sad, because Costner in “Water World” is one of my favs.

Anyway, I told my boss I’d have a custom plugin functioning for him by Tomorrow.  Actually, today I guess technically.

So, I couldn’t sleep.  Things came up at work and I just wasn’t able to get it done.  But I told him it would be ready and you know what? It is.  I stayed up.  I couldn’t sleep thinking about it being there, non-functioning.

My brain is frazzled, but it works.  G’night.

Learning WordPress

I’ve been developing websites for nearly twenty years… alone.  I’ve never been on a team with other coders.  My jobs have all been freelance or being a full-time webmaster.  Once for a hospital and now for a school.  All the coding knowledge I have is self taught.

I thought I was good.  My eyes were open when I became interested in possibly working for a company my friend worked for.  I applied, nailed the personality interview then choked on the code samples.  I was a bad programmer.

I understand coding.  I can read code.  I get the logic and what is happening and why.  But I had no structure.  I didn’t take the extra step to keep things clean and prepared for growth.  I’d right nearly the same section of code five times in an app instead of writing an appropriate function.

I decided to level up and I’ve started.  My first goal was to write a plugin from scratch and do it the right way.  As of now it’s being reviewed for addition to WordPress.org.  I have another nearly ready to submit and another half finished.  I’ve built a theme and I’ve been studying the deeper parts of WordPress core.  Onward and upward.

Hello world (again)!

Hi world, my name is Chris Flannagan and I’m an internet developer.  And a musician… and father, and husband, and painter, and writer, and homebrewer, and graphic design and, well, I like to do a lot of stuff.

I’ve bounced my focus in life around quite a bit but at the ripe age of 32 I believe WordPress and php are my true passions.  As I’ve been on a journey to level up my skills in these areas I’ve decided to put together a site to display my work and blog about my life.  This isn’t the first time I’ve done this hence the “(again)” in my title, but I’m going to make it my best.