精华内容
下载资源
问答
  • css水平居中

    2021-02-05 10:29:12
    css水平居中 ** 第一种:对于行内元素:text-align:center; 第二种:强制内联 display:inline-block;(或display:inline)和text-align:center;实现水平居中 第三种:绝对定位实现水平居中 .content{ position: ...

    **

    css水平居中

    **

    第一种:对于行内元素:text-align:center;


    第二种:强制内联

    display:inline-block;(或display:inline)和text-align:center;实现水平居中
    在这里插入图片描述

    第三种:绝对定位实现水平居中

    .content{

    position: absolute;

    left: 50%;

    transform: translateX(-50%); /* 移动元素本身50% */

    background: aqua;

    }



    第四种:相对定位实现水平居中
    .contentParent{

    display: inline-block; /* 把父元素转化为行内块状元素 */

    /*float: left; 把父元素转化为行内块状元素 */

    position: relative;

    left: 50%;

    }

    /目标元素/

    .content{

    position: relative;

    right: 50%;

    background-color:aqua;

    }

    二,居中元素不定宽高

    1,line-height(把children设为行内元素,通过text-align就可以做到水平居中,使用vertical-align也可以在垂直方向做到居中。)

    .parent{
    line-height: 400px;
    text-align: center;
    font-size: 0px;
    }
    .children{
    font-size: 16px;
    display: inline-block;
    vert-align: middle;
    line-height: initial;
    text-align: left;
    }
    2,对于水平居中,可以使用最简单的center标签,

    展开全文
  • css 水平居中

    2019-11-25 15:11:47
    1.水平居中的margin:0 auto,这个是用于块级元素上。 2.水平居中 text-align:center,行内元素可以在父元素上添加效果让它进行水平居中,子元素都会居中。 4.水平垂直居中(二)定位和margin:auto; 这个方法也...

    1.水平居中的margin:0 auto,这个是用于块级元素上。

    在这里插入图片描述

    在这里插入图片描述

    2.水平居中 text-align:center,行内元素可以在父元素上添加效果让它进行水平居中,子元素都会居中。

    在这里插入图片描述
    在这里插入图片描述

    4.水平垂直居中(二)定位和margin:auto; 这个方法也很实用,不用受到宽高的限制,很好用。

    在这里插入图片描述

    展开全文
  • CSS水平居中

    2021-01-12 15:49:42
    缺点:子元素的文字会水平居中。 二、使用 margin:0 auto; 1、子元素为块元素。 2、若子元素设置有宽度则可以使用绝对定位的盒模型属性,实现居中效果;若不设置宽度时,子元素被拉伸。 三、absolute绝对...

    一、使用text-align:

    1.子元素为行内元素:在其父元素上设置text-align:center;

    <div class="father1 fCommon">
        <div class="children1 cCommon">
            text-align:center;
            display:inline-block;
        </div>
    </div>
    
    .father1{
        text-align: center;
    }
    .children1{
        
    }
    

    在这里插入图片描述
    2.子元素为块级元素,子元素上添加 display:inline-block;使其变为行内块元素。
    缺点:子元素的文字会水平居中。

    .father1{
        text-align: center;
    }
    .children1{
        display:inline-block;
    }
    

    在这里插入图片描述

    二、使用 margin:0 auto;

    1、子元素为块元素。

    <div class="father2 fCommon">
        <div class="children2 cCommon">
            margin:0 auto;
        </div>
    </div>
    
    .children2{
       margin:0 auto;
    }
    

    在这里插入图片描述

    2、若子元素设置有宽度则可以使用绝对定位的盒模型属性,实现居中效果;若不设置宽度时,子元素被拉伸。

    		.father2{
                margin:0 auto;
                position: relative;
            }
            .children2{
                margin:0 auto;
                position: absolute;
                width: 100px;
                left: 0;
                right: 0;
            }
    

    在这里插入图片描述

    三、absolute绝对定位:

    通过绝对定位的偏移属性实现绝对居中。

    1、配合translate()位移函数。 translate函数的百分比是相对于自身宽度的,所以left:50%配合translateX(-50%)可实现居中效果。

    <div class="father3 fCommon">
        <div class="children3 cCommon">
            position:absolute
            通过绝对定位的偏移属性实现水平居中
            配合translate()位移函数
            translate()位移函数的百分比是相对于自
            身宽度
            left:50%配合translateX(-50%)
        </div>
    </div>
    
    		.father3{
                margin:20px auto;
                position: relative;
            }
            .children3{
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }
    

    在这里插入图片描述

    四、flex布局

    1、在伸缩容器上设置主轴对齐方式justify-content:center
    <div class="father6 fCommon" style="display: flex;justify-content: center">
        <div class="children6 cCommon">
            flex布局
        </div>
    </div>
    

    在这里插入图片描述
    2、不建议采用:(会脱离布局的意义) 在伸缩项目上设置margin: 0 auto

    <div class="father6 fCommon" style="display: flex;">
        <div class="children6 cCommon" style="margin: 0 auto;">
            flex布局
        </div>
    </div>
    

    在这里插入图片描述

    grid布局:

    1、在容器上设置:

    <div  class="father7 fCommon" style="display: grid;justify-items: center">
        <div class="children7 cCommon" style="margin: 0 auto;">
            grid布局
        </div>
    </div>
    

    在这里插入图片描述
    2、不建议采用:(会脱离布局的意义) 在子项目上设置margin:0 auto;

    <div  class="father7 fCommon" style="display: grid;">
        <div class="children7 cCommon" style="margin: 0 auto;">
            grid布局
        </div>
    </div>
    

    在这里插入图片描述

    展开全文
  • CSS 水平居中

    2018-05-21 19:57:28
    零散的知识不整理进入自己的知识框架太容易忘,...水平居中 块级元素水平居中 margin:auto 此居中的方法前提为居中块级元素宽度必须固定才可设置auto自动计算左右补白 .block1{ height: 300px; width: 600px; ...
        

    零散的知识不整理进入自己的知识框架太容易忘,对于CSS脑子里零零散散的!整理自勉!

    水平居中

    块级元素水平居中

    margin:auto

    此居中的方法前提为居中块级元素宽度必须固定才可设置auto自动计算左右补白

       .block1{
            height: 300px;
            width: 600px;
            background: black;
        }
        
        .block2{
            height: 100px;
            width: 100px;
            margin: auto;
            background: red;
        }
     <div class="block1">
        <div class="block2"></div>
     </div>
    

    clipboard.png

    可见块2的margin-left,margin-right设置为auto后实现水平居中,但是margin-top,margin-bottom设置为auto确并不能垂直居中!
    特点:浏览器兼容性强,但扩展性差,无法自适应未知项情况

    text-align:center

    text-align 属性规定元素中的文本的水平对齐方式!显然不是用来给块级元素水平居中的,不过可设置块级元素为行内块级元素时便可实现水平居中

     .block1 {
            height: 300px;
            width: 600px;
            background: black;
            text-align: center;
        }
        
        .block2 {
            height: 100px;
            display: inline-block;
            background: red;
        }
    <div class="block1">
        <div class="block2">11111111111</div>
    </div>
    

    clipboard.png

    特点:扩展性强,但需要额外处理inline-block的浏览器兼容性
    注:该种方法可以让display为inline/inline-block/inline-table/inline/flex值的子元素居中

    position:absolute

    通过设置子元素为绝对定位元素还有left和margin-left的值可以达到居中效果

     .block1 {
            height: 300px;
            width: 600px;
            position: relative;
            background: black;
        }
        
        .block2 {
            height: 100px;
            width: 100px;
            position: absolute;
            left: 50%;
            margin-left: -50px;
            background: red;
        }
     <div class="block1">
        <div class="block2"></div>
     </div>
    
    

    clipboard.png

    特点: 必须知道子元素的宽度才能设置左边补白的负值
    注:网上有说法可以通过和float来实现不定宽度块级元素居中(还未深究)

    CSS3 flex实现水平居中方法

    Flex主要用来布局! Flex布局,可以简便、完整、响应式地实现各种页面布局。后面整理flex布局笔记!

      .block1 {
            height: 300px;
            width: 600px;
            display: flex;
            justify-content: center;
            background: black;
        }
        
        .block2 {
            height: 100px;
            background: red;
        }
      <div class="block1">
        <div class="block2">1123123</div>
     </div>
    

    clipboard.png

    特点:实现便捷,扩展性强但兼容需要考虑

    CSS3 width:fit-content

    width:fit-content可以实现元素收缩效果的同时,保持原本的block水平状态,于是,就可以直接使用margin:auto实现元素向内自适应同时的居中效果了

      .block1 {
            height: 300px;
            width: 600px;
            background: black;
        }
        
        .block2 {
            height: 100px;
            width: -webkit-fit-content;
            width: -moz-fit-content;
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
            background: red;
        }
     <div class="block1">
        <div class="block2">1123123</div>
     </div>
    

    clipboard.png

    特点:扩展性强,但兼容性差;

    float

    浮动居中有待好好研究!
    特点:兼容性强,扩展性强!但实现原理较复杂

    展开全文
  • CSS水平居中+垂直居中+水平/垂直居中的方法总结

    万次阅读 多人点赞 2018-09-02 19:28:12
    水平居中  行内元素  块级元素 方案一:(分宽度定不定两种情况) 方案二:使用定位属性 方案三:使用flexbox布局实现(宽度定不定都可以) 垂直居中 单行的行内元素 多行的行内元素  块级元素 水平垂直...
  • css 水平居中方法收集

    2021-03-16 09:36:32
    text-align: center实现CSS水平居中。 2, 通过display:flex实现CSS水平居中。 随着越来越多兼容flexbox,所以通过“display:flex”实现CSS水平居中的方案也越来越受青睐。 通过display:flex实现CSS水平居中的...
  • 下面小编就为大家带来一篇关于css水平居中的小小探讨。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • css水平居中、垂直居中、水平垂直居中 水平居中 行内元素:block+text-align 块级元素: 方案一:分宽度定不定两种情况   定宽度——margin: 0 auto;(作用:使盒子自己居中,意思是上下距离为0,auto就是左右...
  • css水平居中的方法 1.行级元素水平居中:行级元素水平居中对齐(父元素设置 text-align:center) 2.块级元素水平居中对齐(margin: 0 auto) <div style="width: 100px; height: 100px;border: 1px solid;...
  • CSS水平居中与垂直居中总结: 累计 7 种水平居中 , 5 种垂直居中, 4 种垂直水平同时居中。
  • CSS水平居中 参考资料 CSS 居中系列文章 CSS 垂直居中 CSS 水平垂直居中 一、前言 难得搜索整理一番 CSS 垂直居中,水平居中,水平垂直居中的近乎所有的方案。既能回顾知识查漏补缺,又能提升知识增长见识。CSS ...
  • div居中之css水平居中 单行多行文本垂直居中
  • css水平居中方法

    2016-07-07 16:18:26
    介绍css水平居中的几种方法
  • 哈希 阅读(118) 评论(0) 编辑 收藏 所属分类: CSS 代码HTML+CSS水平居中其实很简body,p{padding:0px;margin:0px;padding-top:20px;font-size:10pt;font-family:"宋体";}.demo{width:800px;height:400px;margin:0 ...
  • css水平居中的方法

    2019-07-06 14:44:10
    实现css水平居中 方法2 通过display:flex(弹性布局)实现css水平居中 父元素: display:flex; flex-direction:column; //从上到下垂直排列 而子元素: align-self:center; //flex子项的对齐方式 方法3 通过display:...
  • 下面小编就为大家带来一篇css水平居中的各种方法总结(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 下面小编就为大家带来一篇CSS水平居中总结(新手必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • CSS 水平居中设置

    千次阅读 2016-01-17 16:17:44
    title: CSS 水平居中设置 date: 2016-1-17 17:20:22 tags: - CSS - Web 前端 comments: truetoc: true1. 行内元素水平居中如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:...
  • css水平居中的方法及代码

    千次阅读 2020-01-07 14:54:54
    css水平居中、垂直居中、水平垂直居中的方法及代码 一、水平居中 (1)行内元素 行内元素包括文本,图片,p标签等。可以通过设置父元素的text-align=center。 .center{ text-align: center; } <div class=...
  • css水平居中的各种方法 说到水平居中,大家可能觉得很简单啊,text-align:center 就OK了。 但是,有时候会发现这样写了也没出效果。原因是什么呢? 请往下看。 水平居中:分为块级元素居中和行元素居中 行内...
  • 一、水平居中  1、行内元素水平居中 text-align :center  2、块级元素水平居中 margin:0 auto   3、多个块状元素的水平居中  实现多个水平排列的块状元素的水平居中,是将要水平排列的块状元素设为display...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,276
精华内容 4,110
关键字:

css水平居中