css居中十八式

最新推荐文章于 2024-04-26 16:58:59 发布
最新推荐文章于 2024-04-26 16:58:59 发布
阅读量334 收藏 6
点赞数 4
分类专栏： 前端 文章标签： css css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/miw__/article/details/113385862
版权

前言

在使用css设置页面样式时会经常遇到需要居中的情况，下面我总结了一些css在不同条件下实现居中的方法。大家看看就好。
为了方便显示居中效果，给父元素和子元素都设置了边框和背景样式，效果都差不多，还是截图看看吧。
在这里插入图片描述

  1. 水平居中+阻止子元素定宽+ margin
<style>
      .parent {
        border: 1px solid #000;
        background-color: rgb(197, 108, 24);
        height: 200px;
      }

      .child {
        border: 1px solid #000;
        background-color: chartreuse;
        font-size: 32px;
        width: 150px;
        margin: 0 auto;
      }
    </style>
    <div class="parent">
      <div class="child">children 子元素</div>
    </div>
  1. 水平居中+ inline-block子元素不定宽+ text-align
<style>
      .parent2 {
        border: 1px solid #000;
        background-color: rgb(197, 108, 24);
        height: 200px;
        text-align: center;
      }

      .child2 {
        border: 1px solid #000;
        background-color: chartreuse;
        font-size: 32px;
        display: inline-block;
      }
    </style>
    <div class="parent2">
      <div class="child2">children 子元素</div>
    </div>
  1. 水平居中+ inline-block子元素定宽+ text-align
<style>
      .parent3 {
        border: 1px solid #000;
        background-color: rgb(197, 108, 24);
        height: 200px;
        text-align: center;
      }

      .child3 {
        border: 1px solid #000;
        background-color: chartreuse;
        font-size: 32px;
        width: 150px;
        display: inline-block;
      }
    </style>
    <div class="parent3">
      <div class="child3">children 子元素</div>
    </div>
  1. 水平居中+内联子元素不定宽+ text-align
<style>
      .parent4 {
        border: 1px solid #000;
        background-color: rgb(197, 108, 24);
        height: 200px;
        text-align: center;
      }

      .child4 {
        border: 1px solid #000;
        background-color: chartreuse;
        font-size: 32px;
        display: inline;
      }
    </style>
    <div class="parent4">
      <div class="child4">children 子元素</div>
    </div>
  1. 水平垂直居中+ flex +子元素不定宽高
<style>
      .parent5 {
        border: 1px solid #000;
        background-color: rgb(197, 108, 24);
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .child5 {
        border: 1px solid #000;
        background-color: chartreuse;
        font-size: 32px;
      }
    </style>
    <div class="parent5">
      <div class="child5">children 子元素</div>
    </div>
  1. 水平垂直居中+ flex +子元素不定宽高+ margin
<style>
      .parent6 {
        border: 1px solid #000;
        background-color: rgb(197, 108, 24);
        height: 200px;
        display: flex;
      }

      .child6 {
        border: 1px solid #000;
        background-color: chartreuse;
        font-size: 32px;
        margin: auto;
      }
    </style>
    <div class="parent6">
      <div class="child6">children 子元素</div>
    </div>
  1. 水平垂直居中+网格+子元素不定宽高
<style>
      .parent7 {
        border: 1px solid #000;
        background-color: rgb(197, 108, 24);
        height: 200px;
        display: grid;
        justify-content: center;
        align-items: center;
      }

      .child7 {
        border: 1px solid #000;
        background-color: chartreuse;
        font-size: 32px;
      }
    </style>
    <div class="parent7">
      <div class="child7">children 子元素</div>
    </div>
  1. 水平垂直居中+网格+子元素不定宽高（居中属性设置在子元素上）
<style>
      .parent8 {
        border: 1px solid #000;
        background-color: rgb(197, 108, 24);
        height: 200px;
        display: grid;
      }

      .child8 {
        border: 1px solid #000;
        background-color: chartreuse;
        font-size: 32px;
        justify-self: center;
        align-self: center;
      }
    </style>
    <div class="parent8">
      <div class="child8">children 子元素</div>
    </div>
  1. 水平垂直居中+网格+子元素不定宽高+ margin
<style>
      .parent9 {
        border: 1px solid #000;
        background-color: rgb(197, 108, 24);
        height: 200px;
        display: grid;
      }

      .child9 {
        border: 1px solid #000;
        background-color: chartreuse;
        font-size: 32px;
        margin: auto;
      }
    </style>
    <div class="parent9">
      <div class="child9">children 子元素</div>
    </div>
  1. 水平垂直居中+ absolute +子元素定宽高+ margin
<style>
     .parent10 {
       border: 1px solid #000;
       background-color: rgb(197, 108, 24);
       height: 200px;
       position: relative;
     }

     .child10 {
       border: 1px solid #000;
       background-color: chartreuse;
       font-size: 32px;
       margin: auto;
       width: 150px;
       height: 100px;
       position: absolute;
       left: 0;
       right: 0;
       bottom: 0;
       top: 0;
     }
   </style>
   <div class="parent10">
     <div class="child10">children 子元素</div>
   </div>
  1. 水平垂直居中+ absolute +子元素不定宽高+ margin
<style>
       .parent11 {
         border: 1px solid #000;
         background-color: rgb(197, 108, 24);
         height: 200px;
         height: 200px;
         position: relative;
       }

       .child11 {
         border: 1px solid #000;
         background-color: chartreuse;
         font-size: 32px;
         margin: auto;
         position: absolute;
         width: fit-content;
         height: fit-content;
         left: 0;
         right: 0;
         bottom: 0;
         top: 0;
       }
     </style>
     <div class="parent11">
       <div class="child11">children 子元素</div>
     </div>
  1. 水平垂直居中+ absolute +子元素不定宽高+ transform
<style>
         .parent12 {
           border: 1px solid #000;
           background-color: rgb(197, 108, 24);
           height: 200px;
           position: relative;
         }

         .child12 {
           border: 1px solid #000;
           background-color: chartreuse;
           font-size: 32px;
           margin: auto;
           position: absolute;
           left: 50%;
           top: 50%;
           transform: translate(-50%, -50%);
         }
       </style>
       <div class="parent12">
         <div class="child12">children 子元素</div>
       </div>
  1. 水平垂直居中+ table-cell +子元素不定宽高+ text-align + vertical-align
<style>
          .parent13 {
            border: 1px solid #000;
            background-color: rgb(197, 108, 24);
            height: 200px;
            /* width 设置百分比会失效,如果宽度不设置就由子元素的内容宽度决定 */
            width: 1000px;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
          }

          .child13 {
            border: 1px solid #000;
            background-color: chartreuse;
            font-size: 32px;
          }
        </style>
        <div class="parent13">
          <div class="child13">children 子元素</div>
        </div>
  1. 水平垂直居中+ inline / inline-block子元素不定宽高+ vertical-align
<style>
          .parent14 {
            border: 1px solid #000;
            background-color: rgb(197, 108, 24);
            height: 200px;
            text-align: center;
          }

          .parent14::before {
            content: "";
            line-height: 200px;
            font-size: 0;
          }

          .child14 {
            border: 1px solid #000;
            background-color: chartreuse;
            font-size: 32px;
            /* display: inline-block; */
            display: inline;
            vertical-align: middle
          }
        </style>
        <div class="parent14">
          <div class="child14">children 子元素</div>
        </div>
  1. 水平垂直居中+书写模式+内联/内联块子元素不定宽高+ text-align
<style>
          .parent15 {
            border: 1px solid #000;
            background-color: rgb(197, 108, 24);
            height: 200px;
            writing-mode: vertical-lr;
            text-align: center;
          }

          .child15 {
            border: 1px solid #000;
            background-color: chartreuse;
            font-size: 32px;
            writing-mode: horizontal-tb;
            /* display: inline; */
            display: inline-block;
            width: 100%;
          }
        </style>
        <div class="parent15">
          <div class="child15">children 子元素</div>
        </div>
  1. 水平垂直居中+水平垂直居中+块子元素定宽+父元素高度由子元素决定+ padding / margin
<style>
          .parent16 {
            border: 1px solid #000;
            background-color: rgb(197, 108, 24);
          }

          .child16 {
            border: 1px solid #000;
            background-color: chartreuse;
            font-size: 32px;
            width: 150px;
            /* margin: auto; */
            /* padding: 50px 0; */
            margin: 50px auto;
          }
        </style>
        <div class="parent16">
          <div class="child16">children 子元素</div>
        </div>
  1. 水平垂直居中+子元素不定宽高+父元素高度由子元素决定+ line-height
<style>
          .parent17 {
            border: 1px solid #000;
            background-color: rgb(197, 108, 24);
            text-align: center;
          }

          .child17 {
            border: 1px solid #000;
            background-color: chartreuse;
            font-size: 32px;
            /* display: inline-block; */
            display: inline;
            line-height: 200px;
          }
        </style>
        <div class="parent17">
          <div class="child17">children 子元素</div>
        </div>
  1. 正方形十字居中
<style>
          .parent18 {
            border: 1px solid #000;
            background-color: rgb(197, 108, 24);
            width: 20%;
            position: relative;
          }
          .parent18::before {
            content: "";
            display: block;
            width: 0;
            height: 0;
            padding: 50% 0;
          }

          .child18::before, .child18::after {
            content: "";
            display: block;
            position: absolute;
            background-color: chartreuse;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
          .child18::before {
            width: 50%;
            height: 5%;
          }
          .child18::after {
            height: 50%;
            width: 5%;
          }
        </style>
        <div class="parent18">
          <div class="child18"></div>
        </div>

总结

主要总结了一些日常遇到的css居中方法，其中双重的方法也可以组合使用.

蜜友
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
CSS图片响应式 垂直水平居中
01-19
我看最近微博流行CSS居中技术，我看了几编资料写的都不多好，于是抽时间把相关资料整合了，具体内容如下。 点击此处下载源码 效果展示： 要求: 1.尽可能兼容更多浏览器，这里兼容到ie7,ie6不支持max-*就不考虑了。 ...
CSS的十八般技巧
04-12 1075
CSS的十八般技巧作者：翻译：阿捷 2005-4-10 22:03:25原文作者：Roger Johansson 作者简介：住在瑞典哥德堡，1994年开始接触和参与web设计，456 Berea Street是他的住址，因此采用这个名字作为他的个人主页域名 原文出处：www.456bereastreet.com 原文发表时间：2005年3月15日 阿捷说明：此文原名"CSS tips and tr
CSS（十八）——块级格式化上下文
老程的小白博客空间
08-29 264
本笔记的内容较为重要，内容不多，但理解起来有些难度。同样在笔记的总结里会对核心概念进行总结和解释。各位同学开这篇笔记可能会多费神一些。 另，如果还是不懂可以私信我。我会尽量为大家说明。
CSS 尺寸 (Dimension)
weixin_30493321的博客
06-06 72
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。 更多实例 设置元素的高度 这个例子演示了如何设置不同元素的高度。 使用百分比设置图像的高度 这个例子演示了如何使用百分比值设置元素的高度。 使用像素值来设置元素的宽度 本例演示如何使用像素值来设置元素的宽度。 设置元素的最大高度 此示例演示如何设置元素的最大高度。 使用...
html 怎么使用css居中,用CSS实现元素居中的N种方法
weixin_39858132的博客
06-21 671
网页布局中，元素水平居中比垂直居中简单不少，同时实现水平垂直居中也不难，难的是想出多种实现水平垂直居中的方法并从中挑选最合适最容易理解的那一个完成我们的项目。现在是响应式设计的时代，大多数情况下我们并不知道用户浏览器尺寸，也没有办法计算元素准确的宽高等，所以将宽高等属性值固定为某个具体的px不可行。以下是实现元素居中的几种实用方法：1 . line-height大法好单行文本垂直居中如果一个标签没...
CSS banner图响应式居中显示的方法
09-27
本篇文章主要介绍了CSS banner图响应式居中显示的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS中的垂直和水平居中完全指南
09-25
主要介绍了CSS中的垂直和水平居中,几乎囊括了各种板式居中的需求,非常推荐!需要的朋友可以参考下
【CSS】grid 布局一行自动填充，每行最大限定px
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
04-23 315
【代码】【CSS】grid 布局一行自动填充，每行最大限定px。
CSS基础——1.CSS样式
weixin_66370632的博客
04-23 686
CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等。css的主要作用是定义网页的样式 CSS样式 1. 行内样式 行内样式：直接定义在 HTML 标签的 style 属性中
(css)鼠标移出样式不变
nyf_unknow的博客
04-23 238
需求：列表鼠标移入切换样式，移出保持不变。
HTML5+CSS3小实例：炫彩荧光线条登录框
艾恩小灰灰的博客
04-23 1016
实例：炫彩荧光线条登录框。技术栈：HTML+CSS。
SCSS的基本使用(一)
大圣归来圣骑士清欢的博客
04-22 506
SCSS的基本使用、语法
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1060
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
CSS文本样式
qq_41807399的博客
04-23 460
CSS中使用text-align属性来定义文本的水平的对其方式。left：左对齐right：右对齐center：居中对齐justify：两端对齐将块状元水平居中需要使用margin属性，将左右两边都设置成自动时，块状元素会自动居中。CSS使用vertical-align属性定义文本的垂直对齐问题auto属性值根据layout-flow属性值定义对齐对象的内容baseline：表示对象内容与基线对齐sub表示垂直对齐文本的下标super表示垂直对齐文本的上标。
2分钟自己写小游戏：使用js和css编写石头剪刀布小游戏、扫雷小游戏、五子棋小游戏。新手老手毕业论文都能用。
m0_68335484的博客
04-23 1351
2分钟自己写小游戏：使用js和css，快捷编写剪刀石头布游戏源代码、扫雷源代码、五子棋。新手老手毕业论文都能用。使用的都是简单的js和css代码，实现了这三款小游戏，复制就能用。一看就能懂。这里分享一下。下次继续。
深入探索CSS中的渐变艺术：线性渐变、径向渐变与锥形渐变详解
最新发布
艾恩小灰灰的博客
04-26 479
CSS渐变技术为网页设计带来了无尽的可能性，通过合理地运用线性渐变、径向渐变和锥形渐变，可以增强网页元素的视觉表现力，创造出生动多彩的用户体验。随着浏览器对CSS标准支持的不断升级，渐变效果的应用将更加广泛和灵活。记得在实际项目中检查浏览器兼容性，并根据需要添加相应的前缀以确保跨浏览器兼容。
PostCSS详细介绍
技术探秘者的博客
04-26 997
PostCSS是一个强大的CSS处理工具，它可以用来转换、优化和格式化CSS代码。与传统的预处理器（如Sass和Less）不同，PostCSS不是一种新的CSS语法，而是一个基于JavaScript插件的工具，可以灵活地扩展和定制。本书将详细介绍PostCSS的原理、用法和常见插件，帮助读者快速掌握PostCSS的使用技巧和优化方法。
CSS的布局模式
qq_60624992的博客
04-26 1254
虽然我们可以通过普通流来实现一行多个div，但是过于麻烦而且行块内存在缝隙，并且有很多的布局无法通过标准流来实现。优点：书写简单缺点：无意义标签较多导致结构化较差优点：简洁，方便缺点：溢出的内容无法显示出来优点：结构语义化缺点：IE6-7不支持，需要使用zoom：1优点：结构语义化缺点：IE6-7不支持，需要使用zoom：1。
css输入框文本垂直居中
07-28
- *1* *2* *3* [前端秘籍，CSS垂直居中必学八式，一招一式尽显功力](https://blog.csdn.net/weixin_34279184/article/details/91471641)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

蜜友

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

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

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

打赏作者

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

抵扣说明：

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

余额充值