How to center a div in 2024

Kasra Madadipouya — Wed, 04 Sep 2024 05:56:58 +0000

Centering a div has long been a meme among software developers, particularly backend developers like me, who often struggle with frontend technologies, including CSS.

The good news is that the struggle is finally over, thanks to the new align-content CSS property. Of course, this property handles vertical alignment only. More on that later.

How it was done historically

Before the introduction of align-content, we usually had to use either CSS Grid or Flexbox to achieve vertical alignment.

Grid example:

<div style="display: grid; align-content: center; justify-content: center; height: 100vh;">
    Hello World!
</div>

Flexbox example:

<div style="display: flex; flex-direction: row; align-items: center; justify-content: center; height: 100vh;">
    Hello World!
</div>

The justify-content property is used for the horizontal alignment of div content in both Grid and Flexbox. For a regular div, we can simply use text-align as follows:

<div style="text-align: center; height: 100vh;">
    Hello World!
</div>

How it is done in 2024

With the introduction of align-content, no longer need to rely on Grid and Flexbox, each of which has some drawbacks. We can achieve the same result more cleanly with the following:

<div style="align-content: center; height: 100vh;">
    Hello World!
</div>

As mentioned earlier, this only handles vertical alignment. For horizontal alignment, we can still use the reliable text-align property in combination with align-content.

<div style="align-content: center; text-align: center; height: 100vh;">
    Hello World!
</div>

Please note that the minimum supported browser versions are Chrome 123, Firefox 125, and Safari 17.4

Resources

Featured images credits

Featured image generated by ChatGPT

Deploy your own Linktree with LittleLink on GitHub Pages

Kasra Madadipouya — Wed, 21 Dec 2022 12:02:58 +0000

Introduction

As you may have heard, Elon Musk's Twitter recently banned links to social media reference landing pages such as Linktree, many.link, and Lnk.Bio. That resulted in mayhem.

Fortunately, the decision was reversed after a short while, but that experience showed me how easily a company could arbitrarily ban harmless links to popular platforms.

For that reason, I started looking for an open-source alternative that is easy to customize and deployable on GitHub Pages.

What is LittleLink

Shortly after I started my search, I found a perfect candidate, LittleLink, developed by Seth Cottle. LittleLink is a lightweight self-managed-no-server-required Linktree substitute. Above all, easily deployable to GitHub pages.

Deploy LittleLink to GitHub Pages in 3 simple steps

Step 1 - fork LittleLink

Although the LittleLink tutorial is a good starter, it only shows the deployment process to Vercel. That is a bit of overkill, in my opinion. The process can be simpler by utilizing GitHub Pages.

As the first step, head to LittleLink GitHub repository and fork the repo by clicking the Fork button on the top right.

Step 2 - create the `gh-pages` branch from the `main` branch

Once you forked the repo, create a new branch called gh-pages.

Then open a new tab in your browser and type: https://<your_github_username>.github.io/littlelink/.

Example: https://kasramp.github.io/littlelink/

Viola! You should see a page like below:

Step 3 - customization

The next step is to apply some customizations and add links to your social media.

Clone the repository,

$ git clone <your_little_link_fork_url>

Switch to the gh-pages branch,

$ git checkout gh-pages

Then open the index.html file in your favorite editor and replace the href of any social media you want with your profile link.

Example:

<!-- GitHub -->
<a class="button button-github" href="https://github.com/kasramp" target="_blank" rel="noopener">
    <img class="icon" src="images/icons/github.svg" alt="GitHub Logo">GitHub</a>
<br>

You can also change the order of links.

For the avatar, go to the images directory and replace the avatar.png and avatar@2x.png files with your preferred pictures. You have to keep the file names the same. You also don't need to resize the images. Any size should work.

If you don't want to have your profile image as favicon, either reference the below line in index.html to a different image or remove it,

<link rel="icon" type="image/png" href="images/avatar.png">

LittleLink has a privacy.html page. You can keep it, edit it, or delete it. If you decide to remove the privacy page, don't forget to remove its reference from the index.html file. Modify the line below.

From:

<p><a href="privacy.html">Privacy Policy</a> | Build your own by forking <a href="https://littlelink.io" target="_blank" rel="noopener">LittleLink</a>.</p>

To:

<p>Build your own by forking <a href="https://littlelink.io" target="_blank" rel="noopener">LittleLink</a>.</p>

You can change the theme by modifying the CSS files under the css directory. There are four files, each with specific functionality. You don't need to change anything there for now.

Once you have finished with the customization, commit and push the changes. Then wait a minute or two and refresh https://<your_github_username>.github.io/littlelink/. You should see your changes.

Technically you are done. Congratulations 🎉 🥳

You successfully managed to self-host your own version of LittleLink. Nobody can ban you anymore.

But, if you are uncomfortable with the github.io domain and want to have your own domain, proceed with the next section.

Add a custom domain

The https://<your_github_username>.github.io/littlelink/ can be ugly and difficult to memorize. Don't worry! You can link your domain to that.

For that, you must do two things:

Create the CNAME file in your repository
Add an A record to your DNS via your host/domain provider

Let's begin with the simpler one.

Add the `CNAME` file to your Git repository

Create a file named CNAME containing your domain address without https://.

$ echo "your_awesome_domain_name.com" > CNAME

Commit and push the change. Don't forget you should do the above change on the gh-pages branch only.

Add `A record` to DNS

Unfortunately, the process varies from vendor to vendor. Each host or domain provider has a different UI. I recommend you do some search on your provider portal first. You should find a tutorial to set an A record. Here are example tutorials of GoDaddy and Cloudflare.

For the sake of completeness, I show mine though.

First, you need to go to your DNS manager page. Then click on A record and fill it with the details below:

Change the host record value to your domain (example.com) or subdomain (contact.example.com). The value should be the same as the CNAME file.

Modify points to to your GitHub Pages (johnwick.github.io).

Save the changes and wait a few minutes, usually 5 to 10 minutes. Then open a tab on your browser and type your domain address. You should see your LittleLink profile.

Bonus - `https` support

By default, GitHub Pages uses the http protocol, which is a bit off-putting even though no sensitive info is served.

That's easily fixable with a single setting change.

Go to your LittleLink repository page and click on the setting button. In the setting page, click on pages and tick Enforce HTTPS.

Now your LittleLink profile works with https.

Forem: Kasra Madadipouya