Hack the ways to center align any text / image / element in CSS

CSS এ alignment set করাটা একটু tricky মনে হতে পারে। 🥲 🥲 For example: কোনও block level element কে (suppose, h1) center এ আনার জন্য text-align : center ব্যবহার করতে পারবেন, কিন্তু যদি সেই block element এর সাথে একটা fixed width add করে দেন তখন কি কাজ করবে এই text-align: center? না। ❌ ❌ Block level element কে width সহ center করতে ব্যবহার করতে হবে margin : 0 auto । আর যখন vertically and horizontally একসাথে center করতে যাবেন, তখন মনে হতে পারে সব যেন জগাখিচুড়ী লেগে গেল। 🤧😵😵‍

Am I telling the truth? Oh!
So, this blog is for you …

এখানে আজকে জানব ৩ টা জিনিসঃ [ এগুলো ছাড়াও আরো অনেক ভাবে করা যায় centering ]

Part -1: কোনও standalone text / image / element কে horizontally centering করা ( Horizontally centering a text / image / element )

Part -2: কোনও div / element এর ভেতরে কোনও text / image থাকলে সেটাকে vertically / horizontally & vertically + horizontally centering করা ( Centering text & image vertically / horizontally & vertically + horizontally inside a div )

Part -3: কোনও standalone text / image / element কে horizontally + vertically centering করা view height & view width এর সাপেক্ষে ( Centering any standalone text / image / element in horizontally + vertically centering relative to view height & view width )

=====================================

Part -1 : Horizontally centering a text / image / element:

======================================

1. Center align text:

    <div class="center">
        <p>This is Chayti</p>
    </div>

<style>
.center {
  text-align: center;
  border: 4px solid purple;
}
</style>

2. Center align element:

.center {
    margin: auto;
    width: 50%;
    border: 4px solid purple;
    padding: 10px;
  }

3. Center an image:

<img src="./images/Logo-PH.png" alt="PHero" style="width:40%">

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

======================================

Part -2: Centering text & image vertically / horizontally & vertically + horizontally inside a div:

======================================

CSS এ কোনও element কে কয়েকভাবে center align করতে পারেনঃ

1. Using CSS position property
2. Using Flexbox
3. Using Grid

1. Using CSS position property:

Css position properties are: relative, absolute, fixed, and static (the default), sticky. আর এগুলো সেট করার জন্য element এর মধ্যে এই ৪ টা Property ( top, right, bottom, and left ) দেওয়া যায়। সেক্ষেত্রে relative & absolute এর combination করে আপনি অনেক কিছুই করতে পারেন।

Centering text using CSS positioningঃ

 <div class="container">
        <div class="centered-element">
            <p>Hello, This is Chayti</p>
        </div>
 </div>

.container {
    position: relative;
    height: 350px;
    border: 3px solid #006100;
  }

  .centered-element {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

এখানে text এর centering টা box ( relative ) এর সাপেক্ষে হয়েছে এবং top : 50% ব্যবহার করায় vertically center হয়েছে।

For both horizontal & vertical center:

 .centered-element {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

Centering an image using CSS positioning:

 <div class="container">
        <div class="centered-element">
            <img src="./images/Logo-PH.png" alt="PHero" style="width:40%">
        </div>
    </div>

.container {
    position: relative;
    height: 350px;
    border: 4px solid purple;
  }

  .centered-element {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

Now do the image horizontally centering by yourself !!!

2. Centering Element with Flexbox:

Centering vertically text & image:

.container {
    display: flex;
    align-items: center;
    height: 350px;
    border: 4px solid purple; 
}

Center text both vertically & horizontally:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    border: 4px solid purple; 
}

Center image both vertically & horizontally:

 <div class="container">
  <img src="images/Logo-PH1.png" alt="PHero" style="width:10%">
    </div>

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    border: 4px solid purple; 
}

======================================

Part -3: Centering any standalone text / image / element in horizontally + vertically centering relative to view height & view width:

======================================

1. Centering a text:

    <h1 class="content" style="color:tomato">Hello!!! This is me !! Chayti !</h1>

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

2. Centering an image:

 <div class="content">
        <img src="images/Logo-PH1.png" alt="PHero" style="width: 20%;">
    </div>

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}

3. Centering an element:

   <div class="content">
        <div style="background-color:tomato; width: 200px; height: 200px;">

        </div>
    </div>

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}

*Bass !!! অনেকটুক হল… একবারে না বুঝলে কয়েকবার পড়ে তারপর বুঝার চেষ্টা করুন। নিজে নিজে blog পড়ার সাথে সাথে code গুলোও করুন। তারপর আস্তে আস্তে concept clear হবে। *

~Let’s_code_your_career
~Happy_Coding!!!