➡️ Center. That. Thing! ⬅️

Centers any HTML element horizontally – relative to the screen!

Try out the demo: Show. Me. THE. DEMO!!! 🔗 Check out also the CSS comparison demo: CSS vs. CTT Comparison

Who is this favor?

For you my, dear designers! ❤️ Tell your developer colleagues to use this library.
For you, my dear developer colleagues. ❤️ Don't be afraid to implement this annoying centered thing anymore. Just use this library.

⬇️ Check out this lovely GIF:

📖 Table of contents

➡️ Center. That. Thing! ⬅️
📖 Table of contents
🧑‍💻 Usage
🛠️ Options
🛟 The problem
💡 How it works
💥 Collision detection
😖 Can't I just use modern CSS?
⛔️ Issues
✍️ Author

🧑‍💻 Usage

Assumptions:

You are able to add a JavaScript library to your website's/project's <head>.
You can add IDs or classes to elements respectively extract element IDs.
You can do at least one of the following:
- Execute some JavaScript at the end of your page.
- Add custom HTML attribute to HTML elements.
- Adjust the global CSS.

Add the script

Add the following script to one or every page:

<script src="https://cdn.jsdelivr.net/gh/peter-kuhmann/[email protected]/dist/center-that-thing.min.js"></script>

Center using JS

To center a specific element by executing some JavaScript, use:

// Use element reference
centerThatThing(myElementToCenter, { /* options */})

// Use CSS selector
centerThatThing("nav > .logo", { /* options */})

The <script> block must come ofter the element!

Center with CTT using HTML attributes

Add the attribute data-ctt-enable="true" to the element you want to center.

<div class="container">
    <div>Left</div>
    <div data-ctt-enable="true">To be centered</div>
    <div>Right</div>
</div>

Center with CTT using CSS variables (yes!)

Add a CSS variable to your global CSS:

/* You must add it to ":root"! */
:root {
    --center-that-thing: '[{"selector": "nav > .logo"}, {"selector": "footer > .logo", "collisionDetection": "siblings"}]';
}

Dynamic elements

If you want the library to center elements that will be dynamically added to your page but have e.g. the HTML attribute data-ctt-enable="true", then execute the following function:

enableCenterThatThingDynamicDiscovery()

🛠️ Options

The library currently supports the following options:

Option	Mandatory	Type	Options	Description	HTML attribute
`collisionDetection`	NO	`false OR string`	`false, "siblings"`	`false` turns collision detection of. `"siblings"` causes the library to only move the element between the siblings.	`data-ctt-collision-detection="{value}"`

🛟 The problem

The following images describe a problem scenario with flex:

What you want to achieve is: Position one element exactly in the center of the screen.

This is just one very simple problem example. There are others out there (container has an offset).

This library helps you to position that one element exactly in the center of the screen.

💡 How it works

Let's make it short:

The library remembers your element.
The library gets the current position.
The library computes the ideal position (centered in the middle of the screen).
The library applies an offset using position: relative; and left: {offset}px;

The library does that again, when

the screen size changes or
the element size changes.

The library currently also supports a simple collision detection.

💥 Collision detection

You may not want the element to be centered relative to the screen at any cost.

You may not want the element to cover other elements (e.g. in the navigation).

Therefor, the library supports also a "collision detection" mechanism. Currently, it supports:

no collision detection (false)
siblings/neighbour checks ("siblings")

Check out the demo, to understand better!

😖 Can't I just use modern CSS?

Yes, you can. In many cases. But in some, not.

There are generally two CSS solutions:

Flex layout with the sibling elements using flex: 1; to we of equal width. This causes the center element to be sandwiched exactly in the middle.
Grid layout with grid-template-columns: 1fr auto 1fr;. Same principle as with the flex layout: Center element will be sandwiched.

When does that work?

The container is centered.
You have three (or an odd number) of elements.
It's okay for you, if both siblings are of equal width.

When is this not a good idea?

You want the sibling elements to have different widths that use available space and the centered element should move.
You have two elements respectively an even number of elements.
The container is NOT centered.

Check out the CSS vs. CTT comparison: CSS vs. CTT Comparison

⛔️ Issues

Do you have an issue with that library?

➡️ Please create a GitHub issue! 🙏

✍️ Author

Peter Kuhmann
Senior Software Engineer
[email protected]
https://www.peter-kuhmann.de

peter-kuhmann / center-that-thing Goto Github PK