破解 CSS 中居中对齐文本/图像/元素的方法

2025-05-24

破解 CSS 中居中对齐文本/图像/元素的方法

CSS এ 对齐设置 করাটা একটু 棘手 মনে হতে পারে। 🥲 🥲 例如：কোনও块级元素কে（假设，h1）中心এআনারজন্য文本对齐：中心ব্যবহারকরতে পারবেন、কিন্তু যদি সেই 块元素 এর সাথে একটা 固定宽度添加 করে দেন তখন কি কাজ করবে এই 文本对齐：居中？ না। ❌ ❌ 块级元素 কে width সহ center করতে ব্যবহার করতে হবে margin : 0 auto । আর যখন垂直和水平একসাথে中心করতেযাবেন，তখনমনেহতেপারে সব যেন জগাখিচুড়ী লেগে গেল। 🤧😵😵‍

我说的是实话吗？哦！
所以，这篇博客是写给你的……

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

第-1部分： কোনও独立文本/图像/元素কে水平居中করা （水平居中文本/图像/元素）

Part -2: কোনও div / element এর ভেতরে কোনও 文本/图像 থাকলে সেটাকে 垂直/水平和垂直+水平居中 করা (将文本和图像在 div 内垂直/水平和垂直+水平居中）

第 3 部分：将独立文本/图像/元素水平 + 垂直居中，相对于视图高度和视图宽度以及水平居中任何独立文本/图像/元素相对于视图高度和视图宽度水平 + 垂直居中

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

第 1 部分：水平居中文本/图像/元素：

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

1. 居中对齐文本：

    <div class="center">
        <p>This is Chayti</p>
    </div>
Enter fullscreen mode Exit fullscreen mode 
<style>
.center {
  text-align: center;
  border: 4px solid purple;
}
</style>
Enter fullscreen mode Exit fullscreen mode

图片描述

2. 居中对齐元素：

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

图片描述

3. 将图像居中：

<img src="./images/Logo-PH.png" alt="PHero" style="width:40%">
Enter fullscreen mode Exit fullscreen mode 
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
Enter fullscreen mode Exit fullscreen mode

图片描述

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

第 2 部分：在 div 内垂直/水平和垂直+水平居中文本和图像：

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

CSS 元素 居中对齐 居中对齐

  1. 使用 CSS 位置属性
  2. 使用 Flexbox
  3. 使用网格

1.使用CSS位置属性：

CSS 位置属性有：相对、绝对、固定、静态（默认）、粘性。属性（上、右、下、左） দেওয়া যায়। সেক্ষেত্রে 相对和绝对এর组合 করে আপনি অনেক কিছুই করতে পারেন।

使用 CSS 定位使文本居中

 <div class="container">
        <div class="centered-element">
            <p>Hello, This is Chayti</p>
        </div>
 </div>
Enter fullscreen mode Exit fullscreen mode 
.container {
    position: relative;
    height: 350px;
    border: 3px solid #006100;
  }

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

图片描述

文本居中 框框（相对） 顶部：50% ব্যবহার করায়垂直居中হয়েছে।

对于水平和垂直中心：

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

图片描述

使用 CSS 定位使图像居中：

 <div class="container">
        <div class="centered-element">
            <img src="./images/Logo-PH.png" alt="PHero" style="width:40%">
        </div>
    </div>
Enter fullscreen mode Exit fullscreen mode 
.container {
    position: relative;
    height: 350px;
    border: 4px solid purple;
  }

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

图片描述

现在自己将图像水平居中即可！

2. 使用 Flexbox 居中元素：

垂直居中文本和图像：

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

图片描述

图片描述

垂直和水平居中文本：

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

图片描述

垂直和水平居中图像：

 <div class="container">
  <img src="images/Logo-PH1.png" alt="PHero" style="width:10%">
    </div>
Enter fullscreen mode Exit fullscreen mode 
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    border: 4px solid purple; 
}
Enter fullscreen mode Exit fullscreen mode

图片描述

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

第 3 部分：将任何独立文本/图像/元素相对于视图高度和视图宽度水平 + 垂直居中：

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

1. 文本居中：

    <h1 class="content" style="color:tomato">Hello!!! This is me !! Chayti !</h1>
Enter fullscreen mode Exit fullscreen mode 
.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
Enter fullscreen mode Exit fullscreen mode

图片描述

2. 使图像居中：

 <div class="content">
        <img src="images/Logo-PH1.png" alt="PHero" style="width: 20%;">
    </div>
Enter fullscreen mode Exit fullscreen mode 
.content {
  position: absolute;
  left: 50%;
  top: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}
Enter fullscreen mode Exit fullscreen mode

图片描述

3. 居中元素：

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

        </div>
    </div>
Enter fullscreen mode Exit fullscreen mode 
.content {
  position: absolute;
  left: 50%;
  top: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}
Enter fullscreen mode Exit fullscreen mode

图片描述

*低音！！！ অনেকটুকহল…একবারেনাবুঝলেকয়েকবারপড়েপড়ে তারপর বুঝার চেষ্টা করুন। নিজেনিজে博客পড়ারসাথেসাথে代码গুলোওকরুন। তারপরআস্তেআস্তে概念清晰হবে। *

~让我们编码你的职业生涯
~快乐编码！！！

文章来源：https://dev.to/chayti/hack-the-ways-to-center-align-any-text-image-element-in-css-4e10
Devto 翻译
PREV
一名普通开发者的自白
NEXT
身份验证和授权101