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:
- ➡️ Center. That. Thing! ⬅️
- 📖 Table of contents
- 🧑💻 Usage
- 🛠️ Options
- 🛟 The problem
- 💡 How it works
- 💥 Collision detection
- 😖 Can't I just use modern CSS?
- ⛔️ Issues
- ✍️ Author
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 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>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!
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>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"}]';
}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()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 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.
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;andleft: {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.
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!
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
Do you have an issue with that library?
➡️ Please create a GitHub issue! 🙏
Peter Kuhmann
Senior Software Engineer
[email protected]
https://www.peter-kuhmann.de
