How to center a checkbox in a table cell?

The Longest Journey is Centering the Checkbox

The Old Ways: Text-Align and Vertical-Align

Before flexbox took center stage, developers relied on text-align and vertical-align.

.checkbox-cell {
  text-align: center; /* Where should I align text? Ummm...center? */
  vertical-align: middle; /* Where should I align vertically? Maybe...middle? */
}


This will position the checkbox in the center, both vertically and horizontally.

The Wrapper Approach: Inner Div

You may want to wrap the checkbox in a div for additional control:

<td>
  <div style="text-align: center;">
    <input type="checkbox" />
  </div>
</td>


This gives a little extra padding to the checkbox.

Good Ol' Days: Align Attribute

The align attribute offers a simpler method, but note that it's not recommended in strict HTML5 doctypes:

<td align="center"><input type="checkbox" /></td>


All the cool kids are using CSS now.

Fill 'em Up: Dynamic Cells

When you're messing with dynamic tables, you can use JavaScript or backend templating to drop in checkboxes:

function addCheckboxes() {
  let tableRow = "<tr><td style='display: flex; justify-content: center; align-items: center;'><input type='checkbox'></td></tr>";
  // Add the row to your table. Sprinkle some jQuery magic if you'd like.
}


Voila! Instant checkbox, just add JavaScript.

RWD FTW: Responsive Design

Don't forget to ensure your checkboxes play nice with different screen sizes:

.table-responsive {
  width: 100%; /* Full width, because why not? */
  overflow-x: auto; /* In case of overflow, become a scrollable superhero. */
}


This will help table and checkboxes render nicely on small screens.

Browsers Assemble! Cross-Browser Support

Cross-browser compatibility is a tough cookie. Make sure you consider support for properties like display: flex;.

Handling More Than Checkboxes

Life isn't just about centering checkboxes. It's also about spanning rows and additional content:

Spanning Rows

If a checkbox resides in a cell spanning multiple rows, flexbox can save the day:

.spanning-checkbox-cell {
  display: flex; /* Become flexible, my friend. */
  flex-direction: column; /* We're going up...  */
  justify-content: center; /* ...and then back to the center. */
  height: 100%; /* Your row is only as high as you set it. */
}


Styling Like a Pro

It's fine to use inline CSS for rapid demos, but for production code, opt for external stylesheets:

/* In your stylesheet */
.checkbox-cell {
  /* ... your flexbox styles ... */
}


Compatibility Issues

Padding, borders, and explicit heights might mess with your center alignment. Make sure to check your layout across browsers and screen sizes.

Learn, Test, Collaborate

Use tools like jsFiddle for testing and collaborating.