CSS如何让一个盒子或内容在指定区域中上下左右居中

news2025/1/12 15:09:50

        要使用CSS让盒子或内容在其父元素中上下左右居中，可以使用多种方法。例如：flexbox布局、使用grid布局、box布局、使用position定位和transform结合、以及表格属性等等，相关属性来实现内容的上下左右的居中。

        接下来我们使用以上的方法，将下图中的发电率和发电量内容进行上下左右居中。

一、创建页面

        首先创建一个demo目录，新建html页面和存放图标的image目录。

        html页面代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      font-size: 14px;
      padding: 20px;
    }

    .item-list-box {
      display: inline-block;
      width: 500px;
      border: 2px solid rgba(0, 0, 0, .5);
      background-color:
        rgba(0, 0, 255, .6);
    }

    .item-list-box .title,
    .item-list-box .content {
      width: 100%;
      box-sizing: border-box;
      padding: 12px 15px;
    }

    .item-list-box .title {
      border-bottom: 1px solid rgba(0, 0, 0, .5);
    }

    .item-list-box .title h3 {
      font-size: 18px;
      color: #fff;
      position: relative;
      line-height: 1;
      padding-left: 15px;
    }

    .item-list-box .title h3::before {
      display: block;
      content: '';
      width: 4px;
      height: 100%;
      background-color: #fff;
      position: absolute;
      left: 0;
    }

    .item-list-box .content {
      height: 200px;
      position: relative;
    }

    .item-list-box .content ul.list li {
      list-style: none;
      font-size: 16px;
      color: #fff;
      display: inline-block;
      vertical-align: middle;
      padding: 5px 10px;
      text-align: center;
    }

    .item-list-box .content ul.list li img {
      width: 50px;
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <div class="item-list-box">
    <div class="title">
      <h3>电量统计</h3>
    </div>
    <div class="content">
        <ul class="list">
          <li>
            <img src="image/icon_white_01.png" alt="">
            <p>发电率：95%</p>
          </li>
          <li>
            <img src="image/icon_white_02.png" alt="">
            <p>发电量：25329338</p>
          </li>
        </ul>
    </div>
  </div>

</body>
</html>

        效果如下图：

二、实现水平和垂直方向居中

        以下方法都可以实现盒子在父元素中上下左右居中的效果，选择哪种方法取决于您的布局需求和个人偏好。

2.1 使用flex布局

        ‌Flex布局（Flexible Box Layout）‌，也称为弹性盒布局，是一种CSS布局方式，旨在提供一种更有效的方式来对容器中的子元素进行排列、对齐和分配空间，尤其适用于响应式设计，能够自动适应不同尺寸的屏幕。‌

Flex布局本次主要使用的属性：

  1. ‌flex-direction‌：决定主轴的方向，可以是行（水平）或列（垂直）。
  2. ‌justify-content‌：定义项目在主轴（水平）上的对齐方式。
  3. ‌align-items‌：定义项目在交叉轴（垂直）上的对齐方式。
IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
支持版本11.0+22.0+21.0+-webkit-6.1+-webkit-17.0+7.0+-webkit-4.4+20.0+-webkit-
29.0+9.0+9.0+28.0+

        代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style type="text/css">
    /* 略... */
  </style>
</head>

<body>
  <div class="item-list-box">
    <div class="title">
      <h3>电量统计</h3>
    </div>
    <div class="content">
        <ul class="list">
          <li>
            <img src="image/icon_white_01.png" alt="">
            <p>发电率：95%</p>
          </li>
          <li>
            <img src="image/icon_white_02.png" alt="">
            <p>发电量：25329338</p>
          </li>
        </ul>
    </div>
  </div>

  <style type="text/css">
    .item-list-box .content ul.list{
      height: 100%;
      display: flex;
      justify-content: center;    /* 水平方向居中 */
      align-items: center;        /* 垂直方向居中 */
    }
  </style>

</body>
</html>

        效果如下图：

2.2 position与transform

        在CSS中，可以利用position和transform结合使用，使内容在水平和垂直方向居中显示。       

position支持浏览器版本：IE8.0+, Firefox40.0+, Chrome40.0+, iOS8.0+, Android4.4+, Opera40.0+

transform支持浏览器版本：IE8.0+, Firefox40.0+, Chrome40.0+, iOS8.0+, Android4.4+, Opera40.0+

        先使用position定准，将内容往右和往下各移50%距离，再使用transform将内容部分盒子往左和往上移50%，则内容就可以显示在content位置了。

        CSS transform中的translate功能主要用于元素的位移操作‌。translate可以通过不同的参数来实现元素在X轴、Y轴或Z轴上的平移。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style type="text/css">
    /* 略... */
  </style>
</head>

<body>
  <div class="item-list-box">
    <div class="title">
      <h3>电量统计</h3>
    </div>
    <div class="content">
        <ul class="list">
          <li>
            <img src="image/icon_white_01.png" alt="">
            <p>发电率：95%</p>
          </li>
          <li>
            <img src="image/icon_white_02.png" alt="">
            <p>发电量：25329338</p>
          </li>
        </ul>
    </div>
  </div>

  <style type="text/css">
    .item-list-box .content ul.list{
      display: inline-block;
      position: relative;
      left: 50%;      /* 水平方向向右移50%距离（content盒子宽度的50%距离） */
      top: 50%;       /* 垂直方向向右移50%距离 （content盒子调度的50%距离）*/
      transform: translate(-50%, -50%); /* 以内容宽和高的50%, 往左和往上移动50%距离 */
    }
  </style>

</body>
</html>

        页面效果如下图：

2.3 table-cell布局

        ‌CSS中的table-cell属性‌用于将一个元素设置为表格单元格布局，类似于HTML中的<td>或<th>元素。通过设置元素的display属性为table-cell，可以实现类似表格单元格的布局效果。

        本次主要使用的属性：

  1. vertical-align：垂直方向内容居中
  2. text-align：水平方向内容的居中

        代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style type="text/css">
    /* 略... */
  </style>
</head>

<body>
  <div class="item-list-box">
    <div class="title">
      <h3>电量统计</h3>
    </div>
    <div class="content">
        <ul class="list">
          <li>
            <img src="image/icon_white_01.png" alt="">
            <p>发电率：95%</p>
          </li>
          <li>
            <img src="image/icon_white_02.png" alt="">
            <p>发电量：25329338</p>
          </li>
        </ul>
    </div>
  </div>

  <style type="text/css">
    .item-list-box .content{
      display: table;
    }
    .item-list-box .content ul.list{
      display: table-cell;
      text-align: center;       /* 水平方向内容居中 */
      vertical-align: middle;   /* 垂直方向内容居中 */
    }
  </style>

</body>
</html>

        页面效果如下图：

        注意：必须先将属性为table-cell的父元素设置为display: table，table-cell中vertical-align和text-align方可生效。

兼容性和浏览器支持
        CSS的table-cell属性在所有现代浏览器中都得到了良好的支持，包括Chrome、Firefox、Safari和Edge等。它不会影响页面的语义化，但在某些情况下可能会影响SEO。使用table-cell布局的代码相对简洁，且不需要等待所有内容加载完毕即可显示，提高了页面的响应速度‌

2.4 Grid布局

        ‌CSS Grid布局‌是一种强大的二维布局系统，允许开发者通过定义行和列来创建网格结构，并控制网格项在网格中的位置和大小。与Flex布局相比，Grid布局更适合复杂的网格结构，因为它可以同时控制行和列的布局。‌

        将一个元素设置为display: grid，该元素就变成了网格容器，定义了一个包含子元素的网格布局上下文。

容器属性

  1. ‌display‌：指定一个容器采用网格布局，例如display: grid;或display: inline-grid;。
  2. ‌grid-template-columns‌和‌grid-template-rows‌：分别定义网格的列宽和行高。可以使用百分比或fr关键字来定义宽度和高度，或者使用repeat()函数来简化重复的定义。
  3. ‌grid-gap‌：设置网格项之间的间距。
  4. ‌grid-template-areas‌：定义命名区域，方便通过名称放置网格项。‌


项目属性

  1. ‌grid-column-start‌、‌grid-column-end‌、‌grid-row-start‌、‌grid-row-end‌：控制网格项的起始和结束位置。
  2. ‌grid-area‌：通过名称指定网格项的位置。
  3. ‌justify-self‌、‌align-self‌：控制网格项的水平和对齐方式。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style type="text/css">
    /* 略... */
  </style>
</head>

<body>
  <div class="item-list-box">
    <div class="title">
      <h3>电量统计</h3>
    </div>
    <div class="content">
        <ul class="list">
          <li>
            <img src="image/icon_white_01.png" alt="">
            <p>发电率：95%</p>
          </li>
          <li>
            <img src="image/icon_white_02.png" alt="">
            <p>发电量：25329338</p>
          </li>
        </ul>
    </div>
  </div>

  <style type="text/css">
    .item-list-box .content{
      display: grid;
    }
    .item-list-box .content ul.list{
      justify-self: center;   /* 左右居中 */
      align-self: center;     /* 上下居中 */
    }
  </style>

</body>
</html>

        页面效果如下：

2.5 Grid布局中的place-items

        place-items是同时设置 align-items 和 justify-items的快速方法。将其设置为center等同于align-items: center和justify-items: center组合。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style type="text/css">
    /* 略... */
  </style>
</head>

<body>
  <div class="item-list-box">
    <div class="title">
      <h3>电量统计</h3>
    </div>
    <div class="content">
        <ul class="list">
          <li>
            <img src="image/icon_white_01.png" alt="">
            <p>发电率：95%</p>
          </li>
          <li>
            <img src="image/icon_white_02.png" alt="">
            <p>发电量：25329338</p>
          </li>
        </ul>
    </div>
  </div>

  <style type="text/css">
    .item-list-box .content{
      display: grid;
      /* 等同于同时设置了 align-items: center和justify-items: center */
      place-items: center;  
    }
    
  </style>
 

</body>
</html>

        页面效果如下图：

2.6 旧的Box布局

        将对象作为弹性伸缩盒显示，它是弹性伸缩盒的一部分，也称为伸缩盒最老版本。虽然现在推荐使用display: flex，但了解display:box仍然有助于理解弹性盒子布局的演进和兼容性处理。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style type="text/css">
    /* 略... */
  </style>
</head>

<body>
  <div class="item-list-box">
    <div class="title">
      <h3>电量统计</h3>
    </div>
    <div class="content">
        <ul class="list">
          <li>
            <img src="image/icon_white_01.png" alt="">
            <p>发电率：95%</p>
          </li>
          <li>
            <img src="image/icon_white_02.png" alt="">
            <p>发电量：25329338</p>
          </li>
        </ul>
    </div>
  </div>

  <style type="text/css">
    .item-list-box .content{
      display: -webkit-box;
      -webkit-box-align: center;  /* 上下居中 */
      -webkit-box-pack: center;   /* 左右居中 */
    }
    
  </style>

</body>
</html>

        页面效果如下图：

        此篇就先讲到这，希望对大家有所帮助。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2275538.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

用户注册模块用户校验（头条项目-05）

用户注册模块用户校验（头条项目-05）

1 用户注册后端逻辑 1.1 接收参数 username request.POST.get(username) password request.POST.get(password) phone request.POST.get(phone) 1.2 校验参数 前端校验过的后端也要校验&#xff0c;后端的校验和前端的校验是⼀致的 # 判断参数是否⻬全 # 判断⽤户名是否…
阅读更多...
Qt学习笔记第81到90讲

Qt学习笔记第81到90讲

第81讲 串口调试助手实现自动发送 为这个名叫“定时发送”的QCheckBox编写槽函数。 想要做出定时发送的效果&#xff0c;必须引入QT框架下的毫秒级定时器QTimer&#xff0c;查阅手册了解详情。 在widget.h内添加新的私有成员变量&#xff1a; QTimer *timer; 在widget类的构造…
阅读更多...
hutool-http实现离线爬虫

hutool-http实现离线爬虫

文章目录 1.数据爬取流程2.离线爬虫(Hutool-http实现)1.获取数据2.数据清洗3.为什么有各种类型的强转4.数据入库 3.测试完整代码 1.数据爬取流程 1.分析数据源(怎么获取) 2.拿到数据后怎么处理 3.写入数据库存储 2.离线爬虫(Hutool-http实现) 1.获取数据 这里返回的是jso…
阅读更多...
【C语言】_使用冒泡排序模拟实现qsort函数

【C语言】_使用冒泡排序模拟实现qsort函数

目录 1. 排序函数的参数 2. 排序函数函数体 2.1 比较元素的表示 2.2 交换函数Swap的实现 2.3 排序函数bubble_sort的实现 3. 测试整型数据排序 3.1 整型数据比较函数cmp_int的实现 3.2 整型数据排序后输出函数print_int的实现 3.3 整型数据测试函数test_int的实现 3…
阅读更多...
ECharts饼图下钻

ECharts饼图下钻

背景 项目上需要对Echarts饼图进行功能定制&#xff0c;实现点击颜色块&#xff0c;下钻显示下一层级占比 说明 饼图实现点击下钻/面包屑返回的功能 实现 数据结构 [{name: a,value: 1,children: [...]},... ]点击下钻 // 为图表绑定点击事件&#xff08;需要在destroy…
阅读更多...
Java聊天小程序

Java聊天小程序

拟设计一个基于 Java 技术的局域网在线聊天系统，实现客户端与服务器之间的实时通信。系统分为客户端和服务器端两类，客户端用于发送和接收消息，服务器端负责接收客户端请求并处理消息。客户端通过图形界面提供用户友好的操作界面，服务器端监听多个客户端的连接并管理消息通…
阅读更多...
蓝桥杯嵌入式速通（1）

蓝桥杯嵌入式速通（1）

1.工程准备 创建一文件夹存放自己的代码&#xff0c;并在mdk中include上文件夹地址 把所有自身代码的头文件都放在headfile头文件中&#xff0c;之后只需要在新的文件中引用headfile即可 headfile中先提前可加入 #include "stdio.h" #include "string.h"…
阅读更多...
net-http-transport 引发的句柄数（协程）泄漏问题

net-http-transport 引发的句柄数（协程）泄漏问题

Reference 关于 Golang 中 http.Response.Body 未读取导致连接复用问题的一点研究https://manishrjain.com/must-close-golang-http-responsehttps://www.reddit.com/r/golang/comments/13fphyz/til_go_response_body_must_be_closed_even_if_you/?rdt35002https://medium.co…
阅读更多...
TrustRAG：增强RAG系统鲁棒性与可信度的创新框架

TrustRAG：增强RAG系统鲁棒性与可信度的创新框架

在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;LLMs&#xff09;凭借其强大的语言处理能力在诸多领域大放异彩。检索增强生成&#xff08;RAG&#xff09;系统&#xff08;面向企业RAG&#xff08;Retrieval Augmented Generation&#xff09;系统的多维检索框架…
阅读更多...
业务链指标，用户行为模式识别，埋点系统

业务链指标，用户行为模式识别，埋点系统

个人博客&#xff1a;无奈何杨&#xff08;wnhyang&#xff09; 个人语雀&#xff1a;wnhyang 共享语雀&#xff1a;在线知识共享 Github&#xff1a;wnhyang - Overview 此前&#xff0c;我们已经成功搭建起最为基础的聚类指标体系&#xff0c;涵盖计数、求和、最大值、最小…
阅读更多...
Git撤销指定commit并更新远端仓库

Git撤销指定commit并更新远端仓库

Git撤销指定commit并更新远端仓库 一、撤销指定commit 1.首先执行git log 命令&#xff0c;查看git历史提交以及commit信息&#xff1a; 由于需要脱敏&#xff0c;所以截图可能看得马赛克比较多&#xff0c;需要关注的就是上面的commit后跟的id&#xff0c;以及HEAD当前指定…
阅读更多...
基于DFT与IIR-FIR滤波器的音频分析与噪声处理

基于DFT与IIR-FIR滤波器的音频分析与噪声处理

基于DFT与IIR-FIR滤波器的音频分析与噪声处理 【完整源码文档报告】 【需要可随时联系博主&#xff0c;常在线能秒回!】 系统功能与实现介绍 功能与实现 音频处理系统界面搭建&#xff1a;利用MATLAB的GUI工具&#xff0c;构建了音频分析界面&#xff0c;包括文件导入、录…
阅读更多...
基于单片机的无线气象仪系统设计（论文+源码）

基于单片机的无线气象仪系统设计（论文+源码）

1系统方案设计 如图2.1所示为无线气象仪系统设计框架。系统设计采用STM32单片机作为主控制器&#xff0c;结合DHT11温湿度传感器、光敏传感器、BMP180气压传感器、PR-3000-FS-N01风速传感器实现气象环境的温度、湿度、光照、气压、风速等环境数据的检测&#xff0c;并通过OLED1…
阅读更多...
MySQL库表的操作

MySQL库表的操作

目录 一、库的操作 1.1库的创建 1.2字符集和校验规则 1.2.1 查看系统默认字符集以及校验规则 1.2.2 查看数据库支持的字符集 1.2.3 查看数据库支持的字符集校验规则 1.2.4 校验规则对数据库的影响 1.3操纵数据库 1.3.1显示库 1.3.2显示创建语句 1.3.3修改数据库 1.3…
阅读更多...
硬件设计-齐纳管

硬件设计-齐纳管

目录 摘要 详情 齐纳管的工作电流、 摘要 齐纳管&#xff08;Zener Diode&#xff09;是一种特殊的二极管&#xff0c;它能够在特定的反向电压下保持电流稳定。正常情况下&#xff0c;二极管只允许正向电流通过&#xff0c;而阻止反向电流流过。而齐纳管在一定的反向电压下可…
阅读更多...
Airflow：TimeSensor感知时间条件

Airflow：TimeSensor感知时间条件

在数据管道工作流中&#xff0c;任务可能需要在特定的时间执行&#xff0c;或者在继续之前等待一定的时间。为了满足这些需求&#xff0c;Apache Airflow提供了TimeSensor&#xff0c;这是一种内置Sensor&#xff0c;可以监控当前时间&#xff0c;并在达到指定时间时触发后续任…
阅读更多...
libusb学习——简单介绍

libusb学习——简单介绍

文章目录 libusb 简介libusb 编译libusb 源码目录介绍核心代码文件平台支持例子 API使用libusb初始化和去初始化libusb设备处理和枚举libusb 杂项libusb USB描述符libusb 设备热插拔事件通知libusb 异步设备I/Olibusb 同步设备I/Olibusb 轮询与定时 libusb 涉及技术参考 libusb…
阅读更多...
HTML5 网站模板

HTML5 网站模板

HTML5 网站模板 参考 HTML5 Website Templates
阅读更多...
阿里云ios镜像源

阿里云ios镜像源

阿里云镜像源&#xff1a;阿里巴巴开源镜像站-OPSX镜像站-阿里云开发者社区 下载centos7
阅读更多...
【大数据】Apache Superset：可视化开源架构

【大数据】Apache Superset：可视化开源架构

Apache Superset是什么 Apache Superset 是一个开源的现代化数据可视化和数据探索平台&#xff0c;主要用于帮助用户以交互式的方式分析和展示数据。有不少丰富的可视化组件&#xff0c;可以将数据从多种数据源&#xff08;如 SQL 数据库、数据仓库、NoSQL 数据库等&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023