居中一个元素(水平+垂直居中)

这篇具有很好参考价值的文章主要介绍了居中一个元素(水平+垂直居中)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

我们的示例代码全在此基础上修改:

......
<style>
  *     {
            margin: 0;
            padding: 0;
        }

        .par {
            width: 600px;
            height: 400px;
            background-color: antiquewhite;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .chi1 {
            width: 60px;
            height: 40px;
            background-color: rgb(211, 205, 197);
        }
    </style>
............
<div class="par">
        <div class="chi1">1</div>
    </div>

1.flex 弹性布局居中

具体原理参考下面这篇博客:

flex 弹性布局_本郡主是喵的博客-CSDN博客

 .par {
 ....
            display: flex;
            justify-content: center;
            align-items: center;
        }

2.垂直 + 水平居中内容

对于内容是行内式元素(内容大小撑起标签宽高)或文字,是有效的。

line-heignt == height ,能使文字垂直对齐,text-align:center,能使内容居中水平对齐

  .chi1 {
         
.........
            text-align: center;
            line-height: 40px;
        }

3. 采用绝对布局

父元素,采用相对布局,子元素采用相对布局。

我们利用方位属性,调至子元素相对于父元素的方位,达到居中的效果。

PS: top 和bottom,right 和left属性都是相对的,调整一个,另外一个都会失效。文章来源地址https://www.toymoban.com/news/detail-673406.html

          .par {
......           
         position: relative;
        }

        .chi1 {
 .......
            position: absolute;
            top: 45%;
            left: 45%;
            /* bottom: 0;
            right: 0; */
        }

到了这里,关于居中一个元素(水平+垂直居中)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 元素水平垂直居中的5种方式

    1、利用弹性盒子 将父元素设置为display:flex; 通过:  justify-content: center;  align-items: center; 来设置元素的垂直水平居中 2、将元素转化为表格的形式 父元素设置:  display: table-cell;  vertical-align: middle;  text-align: center; 子元素需设置: display: inline-block;  vertical-align: middle;//消除行

    2024年01月16日
    浏览(44)
  • 微信小程序23__flex布局 相关的3种居中: 水平居中_垂直居中_水平垂直居中

    类似这样写法 display:  flex; flex-direction:  column;                //垂直布局 align-items:  center;                    // 水平居中     justify-content:  space-around; //垂直方向分散布局 类似这样写法 display:  flex; flex-direction: row;          //水平布局       align-items: center;    

    2024年02月03日
    浏览(43)
  • CSS实现元素水平垂直居中的各种方法

    关于 CSS 如何将元素进行水平垂直居中的几种常用方法 前言         在设计网页页面的过程中,总会有将元素或者文字进行水平或者垂直居中的要求,各种CSS样式调整,搞的头都大了。这里将会介绍 CSS 中几种常用到的水平垂直居中的方法,希望能够对你有所帮助。 接下

    2024年02月08日
    浏览(46)
  • 元素的水平居中和垂直几种方案

    总结一下各种元素的水平居中和垂直居中方案。 定义行内内容(例如文字)如何相对它的块父元素对齐 ; 不仅可以让文字水平居中,还可以让 行内元素 水平居中 注意:给行内元素的父元素设置 left:左对齐 right:右对齐 center:正中间显示  justify:两端对齐  设置当前块级

    2024年02月06日
    浏览(41)
  • css-4:元素水平垂直居中的方法有哪些?如果元素不定宽高呢?

    1、背景 在开发中,经常遇到这个问题,即让某个元素的内容在水平和垂直方向上都居中,内容不仅限于文字,可能是图片或其他元素。 居中是一个非常基础但又是非常重要的应用场景,实现居中的方法存在很多,可以将这些方法分成两个大类。 居中元素(子元素)的宽高已

    2024年02月14日
    浏览(35)
  • css基础知识七:元素水平垂直居中的方法有哪些?如果元素不定宽高呢?

    一、背景 在开发中经常遇到这个问题,即让某个元素的内容在水平和垂直方向上都居中,内容不仅限于文字,可能是图片或其他元素 居中是一个非常基础但又是非常重要的应用场景,实现居中的方法存在很多,可以将这些方法分成两个大类: 居中元素(子元素)的宽高已知

    2024年02月11日
    浏览(44)
  • 实现div元素和文字水平及垂直居中的方法(超简单,适应各种场合)

    实现实现div元素和文字水平及垂直居中的方法如下: div元素水平居中: style=\\\"margin:0 auto\\\" div元素垂直居中: style=\\\"padding: (外层div的高-内层div的高)/2; background-clip:content-box; \\\" div文字水平居中: 外层div中style=\\\"text-align: center; \\\" div文字垂直居中: 内层div中style=\\\"line-height: 外层div的高

    2024年02月13日
    浏览(42)
  • 【前端 | CSS系列】—— 第1篇:如何实现水平垂直居中对齐?

    单纯的元素 左右居中 对齐: 块级元素 可以使用 magrin: 0 auto ; 非块级元素 使用 text-align: center;

    2024年02月13日
    浏览(50)
  • CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法

    水平居中效果图 水平居中 全局样式 第一种:margin+width 这种方法适用于已经知道width的盒子,实现起来比较简单 第二种:text-align+inline-block 这种方法适用于多种场景(width不固定) 第三种:float+position 这种方法适用于多种场景(width不固定) 第四种: 这种方法适用于多种场

    2024年02月09日
    浏览(64)
  • 水平居中、垂直居中的几种方法

    ① 若是针对inline, 内联块inline-block, 内联表inline-table, inline-flex元素及img,span,button等元素 父元素设置  text-align:center; 或者用绝对定位、弹性布局、grid网格布局实现; ② 不定宽块状元素 设置  margin:0 auto; 或者用绝对定位、弹性布局、grid网格布局、table表布局实现; grid网格布

    2023年04月19日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包