CSS 盒子居中详解

已于 2022-07-28 14:05:18 修改
阅读量6k 收藏 28
点赞数 7
分类专栏： Html/CSS 文章标签： css html flex html5 css3
于 2020-11-27 20:13:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47021982/article/details/110244922
版权

我们在做web练习或项目的时候，经常会碰到盒子居中问题，今天给大家总结了几种方法，希望能有所帮助！

居中目录

1. 内容水平居中

  • text-align: center

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内容水平居中</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
            好好学习，天天向上！
    </div>
</body>
</html>

显示：
在这里插入图片描述

2. 一行文字垂直居中

  • line-height=height

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一行文字垂直居中</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            /* text-align: center; */
            line-height: 300px;
        }
    </style>
</head>
<body>
    <div class="box">
            好好学习，天天向上！
    </div>
</body>
</html>

显示：
在这里插入图片描述

3. 盒子水平居中

  • margin: 0 auto;

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子水平居中</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: red;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

显示：
在这里插入图片描述

4. 子元素在父元素中居中

4.1 子元素在父元素中居中-弹性盒子
  • 方法一：弹性盒子
    display: flex; /* 弹性盒子 */
    justify-content: center; /水平居中/
    align-items: center; /垂直居中/

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子元素在父元素中居中-弹性盒子</title>
    <style>
        .parent {
            width: 500px;
            height: 500px;
            background-color: red;
            display: flex; /* 弹性盒子 */
            justify-content: center; /*水平居中*/
            align-items: center; /*垂直居中*/
        }

        .child {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

显示：
在这里插入图片描述

4.2 子元素在父元素中居中-table-cell

方法二：table-cell
父元素：display: table-cell; /以列来排布/ vertical-align: middle; 垂直居中
子元素：margin: 0 auto 水平居中

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子元素在父元素中居中-table-cell</title>
    <style>
        .parent {
            width: 500px;
            height: 500px;
            background-color: red;
            display: table-cell; /*以列来排布*/
            vertical-align: middle;
        }

        .child {
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

显示：
在这里插入图片描述

4.3 子元素在父元素中居中-绝对定位
  • 方法三：绝对定位
    父元素：position: relative;
    子元素：position: absolute;
    left: 50%;
    top: 50%;
    margin-left: 减去自身的的一半; /如200px, 就减去100px/
    margin-top: 减去自身的一半；/如200px, 就减去100px/

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子元素在父元素中居中-绝对定位</title>
    <style>
        .parent {
            width: 500px;
            height: 500px;
            background-color: red;
            position: relative;
        }

        .child {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }
    </style>

</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

显示：
在这里插入图片描述

4.4 子元素在父元素中居中-transform
  • 方法三：使用transform
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />

  <style>
    #f {
      background-color: red;
      width: 500px;
      height: 500px;
      position: relative;
    }

    #z {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 200px;
      height: 200px;
      background-color: blue;
    }
  </style>
</head>

<body>
  <div id="f">
    <div id="z"></div>
  </div>
</body>

</html>

在这里插入图片描述



—Ending—

木森林哥哥
关注
  • 7
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS盒子模型详解
月光晒了很凉快的博客
03-25 724
文章目录1. 看透网页布局的本质2. 盒子模型（Box Model）组成3. 边框（border）4. 表格的细线边框5. 边框会影响盒子实际大小6. 内边距（padding）7. 新浪导航案例：padding影响盒子好处8. padding不会撑开盒子的情况9. 外边距（margin）10. 外边距典型应用11. 外边距合并11.1 相邻块元素垂直外边距的合并11.2 嵌套块元素垂直外边距的塌陷12. 清除内外边距 1. 看透网页布局的本质 网页布局过程： 先准备好相关的网页元素，网页元素基本都是盒子
CSS盒模型居中方法(1)
最新发布
2401_84150102的博客
05-10 930
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
前端CSS盒子模型详解
weixin_42008209的博客
05-14 366
CSS盒子模型 盒子模型解释 元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(pad...
CSS实现居中对齐 || transition实现元素居中详解
weixin_44362304的博客
08-15 301
CSS盒子居中的6种方法! | 萌云IT部落
css中 居中详解
hurenxun的博客
05-03 155
说到布局除了浮动以及定位外还有一个不得不提的点，那就是居中，居中问题我们在网页布局当中经常遇到，那么以下就是分为两部分来讲，一部分是传统的居中，另一种则是flex居中，每个部分又通过分为水平垂直居中来讲。 一、传统居中方式 1.1水平居中 1.1.1 inline 对于inline元素以及纯文本只需要为父元素设置text-align: center;适用于 inline, inline-block...
css 盒子模型详解
在下月亮有何贵干
11-17 415
目录box-sizingcontent-boxborder-box盒子水平方向的布局margin-right会自动调整margin-right设置auto或定值magin-left设置定值设置magin-left为auto同时设置magin-left和magin-right为auto同时设置width、magin-left和magin-right为auto水平布局总结 box-sizing box-sizing就是用于设置div的盒子模型的。 默认为content-box，还有一个常见设置为border-b
CSS标准盒子模型详解
weixin_55020138的博客
01-16 466
CSS标准盒子模型
css盒子教程,HTML_CSS盒子模式详解三，自本人教程《CSS盒子模式详解 - phpStudy
weixin_36268390的博客
08-04 277
CSS盒子模式详解三自本人教程《CSS盒子模式详解》发表以来，一直获得各位网友的好评与支持，今天应各位网友的要求，也为了答谢各位网友的支持，本人将推出续篇教程，以加深各位网友对CSS盒子模式的理解。此教程面向读者还是DIV排版入门者，如果你是高手，那就不要浪费自己时间了。本人这次将讲解一个纵向CSS导航栏实例的制作，在讲解过程中将会延用之前发表教程所讲到的“盒子”概念用CSS做导航栏也是轻而易举的...
web前端之css水平居中详解
weixin_46820017的博客
05-18 636
前言 老板的手机收到一个红包，为什么红包没居中？ 如何让一个子元素在父容器里水平垂直居中？这个问题必考，在实战开发中，也应用得非常多。 你也许能顺手写出好几种实现方法。但大部分人的写法不够规范，经不起千锤百炼。换句话说：这些人也就面试的时候夸夸其谈，但真的上战场的时候，他们不敢这么写，也不知道怎么写最靠谱。 这篇文章中，我们来列出几种常见的写法，最终你会明白，哪种写法是最优雅的。 当然，我还会拿出实际应用中的真实场景来举例，让你感受一下标准垂直居中的魅力。 如何让一个行内元素（文字、图片等）水平垂直居中
css盒子模型超详解
gbdlacxzdmg的博客
09-22 307
因为我们在css中已经固定了内容区宽度为300px，内边距为25px，边框为25px，外边距为25px，故整个盒子的宽度为：300+25×2+25×2+25×2=450px。外边距是元素边框与周围元素相距的空间，没有背景颜色，是完全透明的。没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。在css处理网页的时候，会认为每个元素都包含在一个不可见的盒子里面，那么我们对网页布局就相当于是摆放盒子。– 上边的样式分别指定了边框的宽度、颜色和样式。– 设置元素的上、右、下、左四个方向的内边距。
css flex 弹性布局详解
09-24
`justify-content`属性控制主轴（默认是水平轴）上的子元素对齐方式，它有多个值，如`flex-start`（默认，元素靠左），`flex-end`（元素靠右），`center`（居中），`space-between`（间隔均匀分布），`space-around`...
css盒模型.docx
02-24
CSS 盒模型详解 CSS 盒模型是 HTML+CSS 中最核心的基础知识之一，它规定了网页元素如何显示以及元素间相互关系。CSS 盒模型是由 content（内容区）、padding（填充区）、border（边框区）和 margin（外边距区）四个...
CSS弹性盒模型flex在布局中的应用详解
01-19
前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法，本文将介绍flex在布局中的应用 元素居中【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items JavaScript Code复制内容到剪贴板 <style&...
详解html的几种水平垂直居中的方式（基础）
12-29
前言 我们在编写马过程中，想必大家对水平垂直居中的方法了解并不多。所以我给大家总结式的列出几...-css样式部分--> .Centered1{ background-color: #800070; width: 100%; height:500px; position: relative;
display属性详解
热门推荐
木木木森林
11-26 6万+
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，称为块元素，而span元素的默认display属性值为“inline”，称为“行内”元素。 块元素与行元素是可以转换的，也就是说display的属性值可以由我们来改变。 display常用属性值1. none：隐藏对象2. inline： 指定对象为行内元素3. block： 指定对象为块元素4. inline-bl.
font-family：常用中文字体的英文名称 （宋体 微软雅黑）
木木木森林
12-06 1万+
常用中文字体的英文名称 （宋体 微软雅黑） 宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 MingLiU 标楷体 DFKai-SB 仿宋 FangSong 楷体 KaiTi 仿宋_GB2312 FangSong_GB2312 楷体_GB2312 KaiTi_GB2312 宋体：SimSuncss中中文字体（font-family）的英文名称 Mac OS的一些：
HTML/CSS 三个小盒子在一个大盒子中水平居中
木木木森林
01-05 1万+
HTML/CSS 三个小盒子在一个大盒子中水平居中 方法一：把子盒子变成行内块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .big { width: 600px; height: 600px
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值