【CSS】水平垂直布局

已于 2022-06-06 10:48:24 修改
阅读量774 收藏 2
点赞数 2
分类专栏： css 文章标签： 前端 css css3
于 2022-04-06 11:01:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52834435/article/details/123985030
版权

【CSS】水平垂直布局

文章目录

一、水平布局

（1）行内元素

text-align: center（给行内元素的父元素加）

    <style>
      .parent {
        width: 200px;
        height: 200px;
        border: 1px saddlebrown solid;
        text-align: center;
      }
    </style>

  <body>
    <main class="parent">
      <span class="inline">456871335</span>
    </main>
  </body>

在这里插入图片描述


（2）块级元素

给要居中的块级元素设置 margin: 0 auto;
    <style>
      .parent {
        width: 200px;
        height: 200px;
        border: 1px saddlebrown solid;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: aqua;
        margin: 0 auto;
      }
    </style>

  <body>
    <main class="parent">
      <div class="child"></div>
    </main>

在这里插入图片描述


要居中的块级元素：left + margin-left

要注意该元素的position：absolute，父元素的position：relative

该元素的 margin-left ：为自身width的一半

    <style>
      .parent {
        width: 200px;
        height: 200px;
        border: 1px saddlebrown solid;
        position: relative;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: aqua;
        position: absolute;//设置定位
        left: 50%;
        margin-left: -50px;//等于自身width/2
      }
    </style>

  <body>
    <main class="parent">
      <div class="child"></div>
    </main>
  </body>

要居中的元素：left + transform
    <style>
      .parent {
        width: 200px;
        height: 200px;
        border: 1px saddlebrown solid;
        position: relative;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: aqua;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
    </style>

  <body>
    <main class="parent">
      <div class="child"></div>
    </main>
  </body>

父元素开启 flex布局(1)

父元素：justify-content: center;

    <style>
      .parent {
        width: 200px;
        height: 200px;
        border: 1px saddlebrown solid;
        display: flex;
        justify-content: center;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: aqua;
      }
    </style>

  <body>
    <main class="parent">
      <div class="child"></div>
    </main>
  </body>

父元素开启 flex布局(2)

给子元素设置 margin: 0 auto;

    <style>
      .parent {
        width: 200px;
        height: 200px;
        border: 1px saddlebrown solid;
        display: flex;
        /* justify-content: center; */
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: aqua;
        margin: 0 auto;
      }
    </style>

  <body>
    <main class="parent">
      <div class="child"></div>
    </main>
  </body>

二、垂直布局

（1）单行文本元素

单行文本垂直居中：父元素line-height等于自身的高度

    <style>
      .parent {
        width: 200px;
        height: 200px;
        border: 1px saddlebrown solid;
        line-height: 200px;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <main class="parent">
      <span class="child"> 文本居中</span>
    </main>
  </body>

在这里插入图片描述


（2）行内块元素垂直居中

将子元素设置为display:inline-block，给父元素添加line-height，值等于自身的高度。

然后给子元素设置vertical-align:middle

    <style>
      .parent {
        width: 200px;
        height: 200px;
        border: 1px saddlebrown solid;
        line-height: 200px;
      }
      .child {
        width: 100px;
        height: 100px;
        vertical-align: middle;
        display: inline-block;
        background-color: aqua;
      }
    </style>

  <body>
    <main class="parent">
      <div class="child"></span>
    </main>
  </body>

在这里插入图片描述


（3）块级元素垂直居中

要居中的元素：top + margin-top

给父元素设置position：relative，给子元素设置position:absolute，top=50%,margin-top: - 自身高度/2

    <style>
      .parent {
        width: 200px;
        height: 200px;
        border: 1px saddlebrown solid;
        position: relative;
      }
      .child {
        width: 100px;
        height: 100px;
        position: absolute;
        top:50%;
        margin-top: -50px;
        background-color: aqua;
      }
    </style>

  <body>
    <main class="parent">
      <div class="child"></span>
    </main>
  </body>

要垂直居中的元素: top + transform

先给父元素和子元素设置定位，然后给子元素设置top:50%和transform:translateY(-50%)，这个与margin-top的区别是

margin-top设置的是自身的具体的值，需要计算，而transform只需要一个百分数。

    <style>
      .parent {
        width: 200px;
        height: 200px;
        border: 1px saddlebrown solid;
        position: relative;
      }
      .child {
        width: 100px;
        height: 100px;
        position: absolute;
        top:50%;
        transform: translateY(-50%);
        background-color: aqua;
      }
    </style>

  <body>
    <main class="parent">
      <div class="child"></span>
    </main>
  </body>

要垂直居中的元素：top + bottom + margin

先给父元素和子元素设置定位，然后用top:0和bottom:0将子元素拉开，再给子元素设置固定的高度height:xx px，最后给子元素设置margin:auto。

    <style>
      .parent {
        width: 200px;
        height: 200px;
        border: 1px saddlebrown solid;
        position: relative;
      }
      .child {
        width: 100px;
        height: 100px;
        position: absolute;
        top:0;
        bottom:0;
        margin: auto;
        background-color: aqua;
      }
    </style>

  <body>
    <main class="parent">
      <div class="child"></span>
    </main>
  </body>

父元素开启 flex 布局

父元素开启 flex 布局后。给子元素 设置：margin:auto

    <style>
      .parent {
        width: 200px;
        height: 200px;
        border: 1px saddlebrown solid;
        display: flex;
      }
      .child {
        width: 100px;
        height: 100px;
        margin: auto;
        background-color: aqua;
      }
    </style>

  <body>
    <main class="parent">
      <div class="child"></span>
    </main>
  </body>

父元素开启 flex 布局（2）

父元素开启 flex 布局后，并在父元素上设置align-items: center;

    <style>
      .parent {
        width: 200px;
        height: 200px;
        border: 1px saddlebrown solid;
        display: flex;
        align-items: center;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: aqua;
      }
    </style>

  <body>
    <main class="parent">
      <div class="child"></div>
    </main>
  </body>

三、水平垂直居中

（1）行内块级元素

父元素的行高等于自身高度，给父元素添加text-align: center实现水平居中，将子元素设置为inline-block，然后给子元素设置vertical-align: middle

    <style>
      .parent {
        width: 200px;
        height: 200px;
        border: 1px saddlebrown solid;
        line-height: 200px;
        text-align: center; /*水平居中*/
      }
      .child {
        height: 100px;
        width: 100px;
        background-color: aqua;
        display: inline-block;
        vertical-align: middle; /*垂直居中*/
      }
    </style>

  <body>
    <main class="parent">
      <span class="child"></span>
    </main>
  </body>

（2）单个块级元素

要水平垂直居中的元素：top + left + transform

先给父元素和子元素设置相关定位，然后给子元素设置top:50%，left:50%，transform:translate(-50%,-50%)

    <style>
      .parent {
        width: 200px;
        height: 200px;
        border: 1px saddlebrown solid;
        position: relative;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: aqua;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    </style>

  <body>
    <main class="parent">
      <div class="child"></div>
    </main>
  </body>

在这里插入图片描述


要水平垂直居中的元素：top + left + right + bottom + margin

先给父元素和子元素设置定位，然后设置要居中的那个元素的top等四个方向的值都为0，然后给这个歌元素设置宽高，最后将margin:auto

    <style>
      .parent {
        width: 200px;
        height: 200px;
        border: 1px saddlebrown solid;
        position: relative;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: aqua;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
      }
    </style>

  <body>
    <main class="parent">
      <div class="child"></div>
    </main>
  </body>

要水平垂直居中的元素：top + left + margin-top + margin-left

先给父元素和子元素设置定位，设置要居中的元素top:50%和left:50%，然后给margin-top和margin-left设置为自身宽高的一半。

    <style>
      .parent {
        width: 200px;
        height: 200px;
        border: 1px saddlebrown solid;
        position: relative;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: aqua;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
      }
    </style>

  <body>
    <main class="parent">
      <div class="child"></div>
    </main>
  </body>

要水平垂直居中的元素: top + left + calc()函数

注：在使用 calc()函数时，运算符前后都要留一个空格，否则样式不生效

    <style>
      .parent {
        width: 200px;
        height: 200px;
        border: 1px saddlebrown solid;
        position: relative;
      }
      .child {
        height: 100px;
        width: 100px;
        background-color: aqua;
        position: absolute;
        left: calc(50% - 50px);
        top: calc(50% - 50px);
      }
    </style>
 
  <body>
    <main class="parent">
      <div class="child"></div>
    </main>
  </body>

父元素开启 flex 布局

父元素开启 flex 布局，并给父元素设置align-items:center 和justify-content:center。

    <style>
      .parent {
        width: 200px;
        height: 200px;
        border: 1px saddlebrown solid;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: aqua;
      }
    </style>

  <body>
    <main class="parent">
      <div class="child"></div>
    </main>
  </body>

父元素开启 flex 布局（2）

父元素开启 flex 布局，给子元素设置margin:auto

    <style>
      .parent {
        width: 200px;
        height: 200px;
        border: 1px saddlebrown solid;
        display: flex;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: aqua;
        margin: auto;
      }
    </style>

  <body>
    <main class="parent">
      <div class="child"></div>
    </main>
  </body>
程序媛小y
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
Flexbox制作CSS布局实现水平垂直居中的简单实例
09-24
本文将详细介绍如何使用Flexbox来实现CSS布局中的水平垂直居中效果。Flexbox（弹性盒模型）是现代Web开发中用于创建响应式和动态布局的强大工具，尤其适合处理复杂的对齐和排列问题。下面我们将通过一个简单的实例来...
CSS垂直分布
qq_57633481的博客
11-24 375
CSS垂直分布
【CSS】实现元素水平垂直居中布局（七种方法）
qq_45677671的博客
01-03 1943
css水平垂直居中六大方法
CSS布局——三个DIV横向竖向平均布局
qq591840685的专栏
10-06 2万+
一、正常默认布局 html代码 <div class="div-big"> <div class="div-small" style="background-color: lightcoral;"></div> <div class="div-small" style="background-color: lightgoldenrodyellow;"></div> <div class="div-small" sty
CSS水平居中+垂直居中+水平/垂直居中的方法总结
热门推荐
半夏半暖半倾城的博客
09-02 19万+
  目录 水平居中  行内元素  块级元素 方案一：(分宽度定不定两种情况) 方案二：使用定位属性 方案三：使用flexbox布局实现（宽度定不定都可以） 垂直居中 单行的行内元素 多行的行内元素  块级元素 水平垂直居中 已知高度和宽度的元素 未知高度和宽度的元素 方案一：使用定位属性 方案二：使用flex布局实现 水平居中  行内元素 首先看它的父元...
css实现垂直上下布局的两种常用方法
qq_43720551的博客
08-30 4748
两个` `元素在` `内垂直居中放置.
CSS水平垂直居中解决方案(6种)
09-24
以下将详细介绍六种不同的CSS水平垂直居中解决方案： 1. **绝对定位+margin负值法** 当你知道元素的宽度时，可以使用这种方法。首先，设置父元素为相对定位，然后子元素使用绝对定位，将其left和top属性设置为50%...
CSS制作水平垂直居中对齐 多种方式各有千秋
09-25
本篇文章将探讨几种实现CSS水平垂直居中的方法，每种方法都有其独特的优势和局限性。 首先，我们来看一种简单的方法，适用于单行文本或图像的垂直居中。这种方法依赖于`line-height`属性，将其设置为与元素高度相同...
收罗CSS布局中有关水平和垂直居中的N种方法
09-25
在CSS布局中，水平和垂直居中是网页设计中常见的需求。本文将详细介绍几种不同的方法，帮助你理解和掌握这些技巧。 首先，最常见的水平居中方法是通过设置元素的`margin`属性。例如，给元素设置固定宽度，并将`...
CSS系列之你能实现多少种水平垂直居中的布局
老__L的博客
02-21 1619
你能实现多少种水平垂直居中的布局
CSS+DIV布局(满屏自适应三行布局,兼容FF,div垂直居中)
07-13
带DOCTYPE的写法。。 ------------------ CSS+DIV写的，上下固定高度，中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ------------------------- 附送一个 DIV垂直居中的页面~~~
CSS——水平布局和垂直布局
surymy
11-17 3822
水平布局 子元素在其父元素中水平方向的位置由以下几个属性共同决定： 为了理解方便理解画了个图，图上一共有子元素的七个属性，而这七个元素的和则必须等于父元素的width <head> <meta charset="UTF-8"> <title>Surymy</title> <style> .box1{ width:280px; height:200px;
垂直布局和外边距的重叠
m0_55640943的博客
11-24 153
无
CSS纵向布局
weixin_38921088的博客
04-14 697
【代码】CSS纵向布局。
CSS如何设置高度为屏幕高度_掌握 CSS 精髓：布局
weixin_39620279的博客
11-21 1231
CSS 虽然初衷是用来美化 HTML 文档的，但实际上随着 float、position 等属性的出现，它已经可以起到调整文档渲染结构的作用了，而随着弹性盒子以及网格布局的推出，CSS 将承担越来越重要的布局功能。渐渐地我们发现 HTML 标签决定了页面的逻辑结构，而 CSS 决定了页面的视觉结构。这一课时我们先来分析常见的布局效果有哪些，然后再通过代码来实现这些效果，从而帮助你彻底掌握 CSS ...
实现垂直布局的 8 种方式
一碗周
12-24 1651
大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~ 写在前面 对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。 最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。 该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏) 实现垂直布局的 8 种方式 .
CSS布局实现 -- 面试题相关简答版（各种居中布局
最新发布
04-05 812
***缺点：****如果子级元素脱离文档流（设置浮动，绝对定位position：absolute，固定定位fixed），导致margin属性无效，这种方法就无法实现水平居中；table-cell： 设置当前元素为元素（单元格）当设置table-cell相当于把父级元素变成表格中的单元格，而内容可以进行垂直方向的水平，而子级元素就相当于单元格中的内容。****优点：****只需要对子级元素进行设置就可以实现水平方向居中布局效果。**优点：**无论父级元素是否脱离文档流，不影响子级元素水平居中效果。
水平布局与垂直布局（外边距折叠）
comegoing_xin_lv的博客
07-20 913
水平垂直布局、外边界重叠，溢出解决
弹性盒子布局实例详解：从水平布局到垂直布局
weixin_43578304的博客
02-27 1450
在CSS中，弹性盒子布局（Flexbox）提供了一种在容器内高效、灵活地对齐和分布空间的方式。无论是水平布局还是垂直布局，Flexbox都能轻松应对。下面我们将通过几个实例来详细讲解如何在水平和垂直方向上应用Flexbox布局。
css 水平垂直居中
09-01
以上是几种常用的CSS水平垂直居中的方法。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* *2* *3* [16种CSS水平垂直居中方法]...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序媛小y

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值