精华内容
下载资源
问答
  • 在IE内核浏览器或者firefox浏览器中都能居中,没有居中的可以用其特殊标签来设定居中可是在谷歌浏览器查看时就出现无法居中的BUG,下面的解决方法有类似情况的朋友可以参考下
  • CSS居中大礼包

    2021-01-08 10:58:18
    **CSS居中大礼包** 水平居中 行内元素&行内块元素:看父元素是不是块级元素,如果是,直接父元素加text-align 如果不是,可将父元素设置为块元素,再用text-align:center; 块元素:如果设置的宽度,谁居中谁就直接...
  • 主要介绍了JS 打印界面的CSS居中代码,需要的朋友可以参考下
  • css居中的8种方法

    千次阅读 2020-08-19 16:53:44
    CSS实现垂直居中的几种方法 垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。有了css3,针对移动端的垂直居中就更加多样化。 ...

    纯CSS实现垂直居中的几种方法

    垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。有了css3,针对移动端的垂直居中就更加多样化。

    方法1:table-cell

    html结构:

    1

    2

    3

    <div class="box box1">

            <span>垂直居中</span>

    </div>

    css:

    1

    2

    3

    4

    5

    .box1{

        display: table-cell;

        vertical-align: middle;

        text-align: center;        

    }

    方法2:display:flex

    1

    2

    3

    4

    5

    .box2{

        display: flex;

        justify-content:center;

        align-items:Center;

    }

    方法3:绝对定位和负边距

     

    .box3{position:relative;}
    .box3 span{
                position: absolute;
                width:100px;
                height: 50px;
                top:50%;
                left:50%;
                margin-left:-50px;
                margin-top:-25px;
                text-align: center;
            }

     

    方法4:绝对定位和0

    1

    2

    3

    4

    5

    6

    7

    8

    9

    .box4 span{

      width: 50%; 

      height: 50%; 

      background: #000;

      overflow: auto; 

      margin: auto; 

      position: absolute; 

      top: 0; left: 0; bottom: 0; right: 0; 

    }

    这种方法跟上面的有些类似,但是这里是通过margin:auto和top,left,right,bottom都设置为0实现居中,很神奇吧。不过这里得确定内部元素的高度,可以用百分比,比较适合移动端。

    方法5:translate

    1

    2

    3

    4

    5

    6

    7

    8

    .box6 span{

                position: absolute;

                top:50%;

                left:50%;

                width:100%;

                transform:translate(-50%,-50%);

                text-align: center;

            }

    这实际上是方法3的变形,移位是通过translate来实现的。

    方法6:display:inline-block

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    .box7{

      text-align:center;

      font-size:0;

    }

    .box7 span{

      vertical-align:middle;

      display:inline-block;

      font-size:16px;

    }

    .box7:after{

      content:'';

      width:0;

      height:100%;

      display:inline-block;

      vertical-align:middle;

    }

    这种方法确实巧妙...通过:after来占位。

    方法7:display:flex和margin:auto

    1

    2

    3

    4

    5

    .box8{

        display: flex;

        text-align: center;

    }

    .box8 span{margin: auto;}

    方法8:display:-webkit-box

     

    .box9{
        display: -webkit-box;
        -webkit-box-pack:center;
        -webkit-box-align:center;
        -webkit-box-orient: vertical;
        text-align: center
    }

     

    css3博大精深,可以实现很多创造性的效果,需要好好研究下。

    今天又发现一种方法,现在补上:

    方法9:display:-webkit-box

    这种方法,在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;

    content 清除浮动,并显示在中间。

    <div class="floater"></div>  
    <div class="content"> Content here </div>  

     

    .floater {
        float:left; 
        height:50%; 
        margin-bottom:-120px;
    }
    .content {
        clear:both; 
        height:240px; 
        position:relative;
    }

     

    展开全文
  • 本文介绍了CSS居中实例之大小不固定的图片居中方法,分享给大家,具体如下: 1.利用table-cell实现垂直居中 [站外图片上传中……(5)] div{ width: 500px; height: 500px; background: #ccc; } .box1{ text...
  • 却不能做到垂直居中……下面就css居中的一些常用方法做个集中的介绍。新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起...
  • css居中问题

    万次阅读 2018-08-27 09:13:10
    居中布局 一、水平居中(子元素) 【1】.常规元素设置水平居中: 《1》行内元素、不定宽块级元素:设置父元素 text-align:center 《2》图片水平居中:设置img clear+display+margin 《3》定宽块级元素:...

    居中布局

    一、水平居中(子元素)

    【1】.常规元素设置水平居中:

    《1》行内元素、不定宽块级元素:设置父元素 text-align:center

    《2》图片水平居中:设置img  clear+display+margin

    《3》定宽块级元素:设置子元素: margin:0 auto;

    《4》通用方法(不管行/块级元素): 

    设置父元素 display:flex; justify-content(水平对齐方式):center;

    【2】浮动元素水平居中(position:relative)

    《1》定宽浮动元素:设置浮动元素本身   position : relative;left:50%;margin-left:-(width/2);

    《2》不定宽元素:父float+父relative+子relative+子 left:-50% 或 right:50%

    浮动元素的left为%时,是 设置以包含元素的百分比计的左边位置。可使用负值。

    所以下例中父元素(红框)被body包含的,则父元素左边缘距整个页面左边缘50%,即父元素左边缘在页面中轴线上;

    子元素(蓝框)再超出父元素50%,设置left:-50% 或者 right:50%

    效果:

    《3》通用(不管定宽还是不定宽): 父元素设置:display:flex; justify-content:center;

    【3】绝对定位元素的水平居中(position:absolute)

    《1》定宽元素:

    方法1:父(红框):relative  子(蓝框):left:50%   margin-left:-(width/2)  

    方法2:父(红框):relative   子(蓝框):left:0   righ:0    margin :0  auto

    效果:

    由于absolute是相对最近的定位父元素,会脱离文档流,而例中父元素relative不会脱离文档流,所以父元素不会被子元素撑开,从而父元素高度为0。

    《2》不定宽元素:父:relative   子:left:50% +translateX(-50%)

    与定宽元素中子元素设置 margin-left:-(width/2)相似

    《3》通用(不管是否定宽),设置父元素   display:flex; justify-content:center;

     

    二、垂直居中(垂直居中,默认外部元素(这里称为父元素)是有高度的

    【1】常规元素的垂直居中

    《1》行内元素,设置 子元素 line-height=父元素height 

    效果:

    《2》通用(行/块/图片) 设置父:dispaly:table-cell + vertical-align:middle   

                                            或者父: display:flex    +     align-items(垂直方向的对齐):center

     

    【2】浮动元素(子元素)垂直居中:

    《1》定高的元素:@#¥%……&*(*……%¥

    方式一:父relative + absolute + line-height=height + top0/bottom0+ margin:auto

    方式二:父relative + absolute + line-height=height + top50% + margin-top-height/2

    注意:浮动子元素的父元素需要设置高度不小于子元素高度。

    效果:

    《2》通用:父元素  display:flex; align-items:center;

     

    【3】绝对定位的垂直居中

    绝对定位元素相当于inline-block:没有行和块之分,只有定高和不定高之分。

    《1》利用绝对定位自身:子元素top:50% + translateY:-50% +父 relative

    《2》通用: 父元素 display: flex; align-items: center;

     

    三、水平垂直居中

    【1】常规元素

    《1》table通用(一列或多列)

    父元素设置   display: table-cell + vertical-alignmiddle + text-aligncenter

    《2》flex通用(见末尾)

    【2】浮动元素

           flex通用(见末尾)

    【3】绝对定位元素

    《1》利用绝对定位来水平垂直居中:

    《2》flex通用见末尾

    【4】水平垂直通用(常规/浮动/绝对定位): flex

    父元素 display:flex; justify-content:center; aligns-item:center;

     

     

     

     

     

     

     

     

     

     

    展开全文
  • css左右居中对齐

    2019-08-05 01:18:43
    NULL 博文链接:https://muzi131313.iteye.com/blog/2047548
  • 主要介绍了使用CSS居中浮动元素的方法,是CSS入门学习中的基础知识,需要的朋友可以参考下
  • 对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中,对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。解决水平居中问题有很多种方法,下面先给大家分享一下三种方法,希望能帮助...
  • html + css 居中方法大全

    千次阅读 2017-11-17 16:21:53
    html + css 元素居中方法大全

    css居中

    水平居中:

    说到水平居中,最简单的方法就是margin:0 auto;

    也就是将margin-left 和 margin-right属性设置为auto;
    源码和效果如下图所示:

    这里写图片描述
    这里写图片描述

    ps:不要想当然的以为简单地将margin值设置为auto,就可以将元素水平、垂直居中(不过在css3弹性布局中确实可以这样子做,这里暂不做过多讨论);

    文本的居中对齐方式:
    这里写图片描述
    这里写图片描述

    ps:文本垂直对齐一般上设置line-height和height 相等的值就可以!

    • padding填充

    利用paddingbackground-clip配合实现div的水平垂直居中:

    通过backgroun-clip设置为content-box,将背景裁剪到内容区外沿,再利用padding设为外div减去内div的差的一半,来实现:

    这里写图片描述
    这里写图片描述

    盒子模型

    这里写图片描述

    • 绝对定位居中

    这里写图片描述
    这里写图片描述
    盒模型
    这里写图片描述

    这里写图片描述
    这里写图片描述

    盒模型
    这里写图片描述

    调整尺寸

    resize 属性可以让尺寸可调。 设置 min- /max- 限制尺寸,确定加了 overflow: auto

    这里写图片描述
    这里写图片描述
    盒模型
    这里写图片描述

    • margin填充(主要给父元素设置overflow来触发父元素的BFC)

    这里写图片描述

    这里写图片描述

    对应的盒模型

    • 列表内容

    这里写图片描述

    absolute定位+margin填充

    这里写图片描述

    这里写图片描述

    对应的盒模型
    这里写图片描述

    总结:*此方法就是利用定位,将子元素设置top和left 均为 50%,然后margin-top 和
    margin-left设为负的本身盒子的高和宽的一半,即可实现水平垂直居中!*

    transform居中

    上面讲到的div居中的例子中,div的宽度都是固定的,然而实际项目中,有可能遇到不定宽的div,特别是响应式或者移动端的设计中,更加常见。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .parent{
                float:left;
                width:100%;
                height:200px;
                background-color:red;
            }
    
            .children{
                float:left;
                position:relative;
                top:50%;
                left:50%;
    
            }
    
            .children-inline{
                position:relative;
                left:-50%;
                -webkit-transform:translate(0,-50%,0);
                transform:translate(0,-50%,0);
                background-color:#ccc;
                color:#fff;
            }
        </style>
    </head>
    <body>
        <div class="parent">
          <div class="children">
            <div class="children-inline">我是水平垂直居中噢!</div>
          </div>
        </div>
    
    </body>
    </html>

    这里写图片描述

    *首先我们利用float,将需要居中的div的父div也就是children的宽度收缩,然后left:50%,将children的左边与水平中线对齐。这个时候,还没有真正居中,我们需要将children-inner左移动-50%,这样就水平居中了。 再来说说垂直方向,先将children的top设为50%,然后其上边和垂直中线对齐了,同样,我们需要将children-inner上移动-50%。但是这个50%是计算不出来的,所以我们用到了transform
    translate3d(0, -50%, 0); 这个方法非常好用噢。 *

    flex居中

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            html,body{
                width:100%;
                height:200px;
            }
    
            .parent{
                display:flex;
                align-items:center;//垂直居中
                justify-content:center;
                width:100%;
                height:100%;
                background-color:red;
            }
    
            .children{
                background-color:blue;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="children">flex水平垂直居中的</div>
        </div>
    </body>
    </html>

    这里写图片描述

    展开全文
  • html+css居中布局公司html网站模板
  • 主要介绍了CSS中使用transform达到布局居中的效果的方法,注意其和其他transform样式之间的冲突问题,需要的朋友可以参考下
  • css居中的几种方式

    千次阅读 2019-03-08 09:41:58
    水平居中 1.定宽块级元素 满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的 <style> div{ width:500px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置...

    水平居中

    1.定宽块级元素

    满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的

    <style>
      div{
        width:500px;/*定宽*/
        margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
      }
    </style>
    <body>
      <div>
        Hello World
      </div>
    </body>
    复制代码

    2.不定宽块级元素

    • 我们经常会遇到不定宽度块级元素的使用,如分页导航,因为分页的数目不定,所以不能用宽度限制住。此时对元素进行水平居中主要有三种方式
    • 加入 table 标签
    • 设置 display;inline 方法

    1.加入 table 标签

    第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )

    第二步:为这个 table 设置“左右 margin:auto”

    <style>
      table{
        margin:0 auto;
      }
      ul{list-style:none;margin:0;padding:0;}
      li{float:left;display:inline;margin-right:8px;}
      </style>
    
    <div>
      <table>
        <tbody>
          <tr><td>
            <ul>
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
            </ul>
          </td></tr>
        </tbody>
      </table>
    </div>
    复制代码

    这种方法的缺点是增加了无语义的HTML标签,增加了嵌套深度

    2.设置 display:inline 方法

    改变块级元素的 dispaly 为 inline 类型,然后使用 text-align:center 来实现居中效果

    <style>
      .container{
        text-align:center;
      }
      .container ul{
        list-style:none;
        margin:0;
        padding:0;
        display:inline;
      }
      .container li{
        margin-right:8px;
        display:inline;
      }
    </style>
    <body>
      <div class="container">
        <ul>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
        </ul>
      </div>
    </body>
    复制代码

    这种方法的缺点是将块级元素的display设置为inline,于是少了很多功能,比如盒子模型

    3 设置 position:relative 和 left:50%;

    通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,给子元素设置 position:relative 和 left:-50% 来实现水平居中。

    <style>
      .container{
        float:left;
        position:relative;
        left:50%
      }
      .container ul{
        list-style:none;
        margin:0;
        padding:0;
        position:relative;
        left:-50%;
      }
      .container li{float:left;display:inline;margin-right:8px;}
    </style>
    <body>
      <div class="container">
        <ul>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
        </ul>
      </div>
    </body>
    复制代码

    这种方法可以保留块状元素仍以 display:block 的形式显示,优点不添加无语议表标签,不增加嵌套深度,但它的缺点是设置了 position:relative,带来了一定的副作用。

    垂直居中

    1.常规元素的垂直居中

    容器内元素display:inline/inline-block

    这种情况就比较容易了,直接设置容器的text-align就可以实现内容元素的水平居中,设置垂直居中的话要设置容器的高度,然后设置容易的line-height==height就可以,如下:

    <style>  
      .container{
        text-align: center;
        height: 50px;
        line-height: 50px;
      }
    </style>
    
     <div class="container">
         <span>我要居中</span>
     </div>
    复制代码

    2.容器内元素display:block且元素宽高已知

    这种情况下我们使用position这个属性结合设置偏移来实现。

    首先设置容器的position:relative,设置元素position为absolute

    然后设置元素的偏移top,left,margin-top,margin-left,其中top,left设置为50%,而margin-top/margin-left的偏移量均为本身元素高/宽的一半,为负值。

    <style> 
        container {
            height: 200px;
            width: 200px;
            background: pink;
            position: relative;
        }
        inner-box {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
            height: 100px;
            width: 100px;
            background: green;
        }
      </style>
    
    <div class="container">
            <div class="inner-box"></div>
        </div>
    复制代码

    3.容器内元素display:block,且元素宽高未知

    这种方法与方法二类似,但是不同的是不能通过设置margin-top/left偏移来达到效果了,因为容器内元素的宽高是未知的。这次通过设置left/top/bottom/right:0,然后设置margin:auto

    <style> 
        .container {
                height: 200px;
                width: 200px;
                background: pink;
                position: relative;
            }
    
        .inner-box {
            position: absolute;
            height: 100px;
            width: 100px;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
            background: green;
        }
      </style>
    
    <div class="container">
            <div class="inner-box"></div>
        </div>
    复制代码

    4 table-cell

    vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

    第一种用法,先看后面一句“在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解,如果给一个表格的td加一个vertical-align:middle的样式,表格里面的内容会垂直居中,同样的如果给一个vertical-align:bottom就会底部对齐,如果给一个vertical-align:top就会顶部对齐。

    html

    <div class="box box1">
            <span>垂直居中</span>
    </div>
    复制代码

    css

        .box1 {
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                width:100px;
               height:100px;
               background-color:red
            }
    复制代码

    第二种用法,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。假设有两个行内元素a和b,a和b都是div,当a加了一个vertical-align:middle样式之后,b的底部(基线)就会对齐a的中间位置,如下图:

    如果a和b都加了一个vertical-align:middle样式,那么就互相对齐了对方的中间位置,也就是它们在垂直方向上的中线对齐了,如下图:

    现在我要让class="box"的div在class="wrapper"的div里面垂直居中,我可以在class="wrapper"的div里面加一个div空标签,把它的高度设为100%,宽度设置为0,再给它一个vertical-align:middle样式,同样的给class="box"的div一个vertical-align:middle样式,那么box就可以在div里面垂直居中了。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS垂直居中</title>
        <style>
            .wrapper{
                width: 500px;
                height: 500px;
                background-color: pink;
    
                text-align: center;
            }
    
            .box{
                width: 100px;
                height: 100px;
                background-color: deepskyblue;
    
                display: inline-block;
                vertical-align: middle;
                margin: 0 auto;
            }
    
            .help{
            width: 0;
            height: 100%;
            display: inline-block;
            vertical-align: middle;
            }
        </style>
    </head>
    <body>
    <div class="wrapper">
        <div class="box"></div>
        <div class="help"></div>
    </div>
    </body>
    </html>
    复制代码

    5 display:flex

    .box2{
        display: flex;
        justify-content:center;
        align-items:Center;
    }
    复制代码

    6 translate

    .box6 span{
                position: absolute;
                top:50%;
                left:50%;
                width:50%;
                height:50%;
                transform:translate(-50%,-50%);
                text-align: center;
                background: #000;
            }
    
    复制代码

    转载于:https://juejin.im/post/5c821a716fb9a049b7812999

    展开全文
  • CSS居中的方式

    千次阅读 2018-05-28 11:55:59
    1、内联元素水平居中 2、块级元素水平居中 3、多块级元素水平居中(利用inline-block) 4、多块级元素水平居中(利用display: flex) 5、垂直居中(单行内联(line-height)元素垂直居中) 6、垂直居中(多行...
  • css居中对齐的几种方法

    千次阅读 2018-09-27 21:52:45
    css居中对齐的几种方法弹性盒子position:absolutefixed+margin:auto弹性盒子与其他传统的对比: 弹性盒子 设置弹性容器的 主轴对齐属性:justify-content:center 交叉轴的对其属性:align-items:center .perent{ ...
  • css居中方式总结,用xmind软件画的流程图,然后转为pdf,
  • CSS居中小结

    千次阅读 2015-07-27 14:01:10
    今天主要谈一谈CSS中的各种居中的办法。 首先是水平居中,最简单的办法当然就是margin:0 auto;也就是将margin-left和margin-right属性设置为auto,从而达到水平居中的效果。那么其他的办法呢?容我一一道来:line-...
  • 15种CSS居中的方式

    万次阅读 2018-03-30 17:32:49
    转载:【基础】这15种CSS居中的方式,你都用过哪几种? 简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中...
  • 主要介绍了使用css实现的div水平、垂直居中并且兼容chrome、ie8,具体示例如下,需要的朋友可以参考下
  • css居中

    千次阅读 2019-01-24 18:53:41
    css居中 一般我们常用的居中是 给元素定一个显示式的宽度,然后加上margin的左右值为auto, 这种方法给知道了宽度的元素设置居中是最方便不过的了,但有很多情况之下,我们是无法确定元素容器的宽度。换句话说,未有...
  • CSS中基础的居中方式 块中文字水平居中 text-align 用于块级元素,作用在使用它的块元素中的文字或者图片上,使得它们在水平方向上居中。 块元素自身水平居中(确定设置了宽度的块) 一般情况下,...
  • CSS居中

    千次阅读 2017-12-27 10:14:52
    css图片水平居中 利用margin: 0 auto实现图片水平居中 利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下: "text-align: center; width: 500px; border: green solid 1px;"> img ...
  • CSS居中的各种实现方式

    千次阅读 2018-05-18 16:21:14
    CSS中如何完美做到居中,一直是令前端工程师头疼的问题。最近读到CSS-TRICKS中的一篇帖子,将居中问题的解决方案策略化。感觉收获很大,翻译过来供大家交流学习。当我们书写CSS时,让元素居中,是抱怨的爆发点之一:...
  • 本文为大家详细介绍下使用js实现遮罩弹出层居中,且随浏览器窗口滚动条滚动,示例代码如下,感兴趣的朋友可以参考下
  • 下面小编就为大家带来一篇CSS水平居中总结(新手必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了使用css实现div垂直居中的示例,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 131,458
精华内容 52,583
关键字:

css居中