Hack the ways to center align any text / image / element in CSS
Tags: css
Published: 2023-01-08 20:16:31

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>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddtqhax3nk2vo4mbbfvs.JPG)

**2. Center align element:**

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

```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xv1pfdx8e4opt7bckpbp.JPG)

**3. Center an image:**

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6r4bo11ccgj0qp9pq88g.JPG)

======================================
## 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%);
  }

```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjyzrsoz3a1lju0hno5o.JPG)

এখানে 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%);
  }

```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lwtqsvpbv9yycglw248s.JPG)

**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%);
  }

```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xck078xuw06383lamsyj.JPG)

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; 
}
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4j15kgcuebsbzmveir28.JPG)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afll9bbhpvfsbaiwrdkk.JPG)

**Center text both vertically & horizontally:**

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9isais4mvu76dqqptm65.JPG)

**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; 
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/unuh3jxs9pc5hn9njwuf.JPG)

======================================
## 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%);
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/knmhlk9fw7lmpqekv06f.JPG)

**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%);
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7w12oaq5hiw5zvp853yv.JPG)

**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%);
}

```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3tkgg3i2po8dtl53ydt0.JPG)

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

**~Let’s_code_your_career
~Happy_Coding!!!**