精华内容
下载资源
问答
  • css 垂直居中

    2014-06-12 07:04:56
    记录下,css 垂直居中,以便学习。
    <div>
    	
    </div>
    <style>
    	div{
    		position: relative;
    		width: 200px;
    		height: 200px;
    		top:50%;
    		left: 50%;
    		margin-top:-100px;
    		margin-left:-100px;
    		background: #CCC;
    	}
    </style>
    记录下,css 垂直居中,以便学习。
    展开全文
  • CSS 垂直居中

    千次阅读 2018-08-30 15:08:00
    前言 被这个问题折磨很久了,一直没有系统的整理,今天就系统的整理一下比较常用的,以后回顾的时候也可以参照 1. line-height ...适用场景:单行文字,下拉框,按钮等...CSS垂直居中技巧,我只会23个,你会几个?

    前言

    被这个问题折磨很久了,一直没有系统的整理,今天就系统的整理一下比较常用的,以后回顾的时候也可以参照

    1. line-height

    适用场景:单行文字,下拉框,按钮等

    原理:将单行文字设置行高以后,文字会位于行高的中间位置。也就是需要将元素的 line-height 设置成和高度一样。

    示例如下

        <style>
            .content{
              width: 400px;
              background: #ccc;
              line-height:100px; /* 垂直居中 */
              text-align: center; /* 水平居中 */
            }
        </style>
        <div class="content">我居中了</div>

    2. line-heigh + inline-block

    既然单行可以做到垂直居中,那么多行肯定也是可以的

    适用场景:多对象的垂直居中

    原理:在要居中的对象外面包裹一层,将它们整个的 display 设置为 inline-block 模仿行内元素。但是包裹对象的内部还是以块级元素的形式存在。

    示例如下

        <style>
        .main{
            width: 400px;
            border: 1px solid red; 
            line-height: 200px;
            text-align: center; /* 水平居中 */
        }
        .wrapper{
            line-height: 1;
            display: inline-block;  
        }
        </style>
    
        <div class="main">
            <div class="wrapper">
                <div>我居中了</div>
                <div>我也是</div>
            </div>      
        </div>

    3. absolute + margin 负值

    这个应该是最常见的居中方式了

    适用场景:多行文字的垂直居中,已知宽高

    原理:利用绝对定位 top 和 left 50%,然后减去元素本身内容区的一半,就可以实现居中

    示例如下

        <style>
        .main{
            border: solid 1px red;
            width: 400px;
            height: 400px;
            position: relative
        }
        .content{
            height: 200px;
            width: 200px;
            background-color: yellow;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }
        </style>
            <div class="main">
            <div class="content">
            </div>
        </div>

    4. absolute + margin:auto

    适用场景:多行文字垂直居中

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

    示例如下

        <style>
        .main{
            border: solid 1px red;
            width: 400px;
            height: 400px;
            position: relative;
        }
        .content{
            position: absolute;
            background-color: yellow;
            width: 200px;
            height: 100px;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        </style>
        <div class="main">
            <div class="content"></div>
        </div>
    


    这里需要注意设置父元素的 position 必须是 relative 或者 absolute 或者 fixed

    5. Flex + align-items

    适用场景:多对象垂直居中

    原理:Flex 布局 align-items 垂直居中,justify-content 水平居中

    示例如下

        <style>
        .main{
            border: solid 1px red;
            width: 400px;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        </style>
        <div class="main">
            <div>我居中了</div>
            <div>我也居中了</div>
        </div>
    

    6. display:table-cell

    适用场景:多行文字的垂直居中技巧

    原理:利用 display 将 div 设置成表格的单元格,然后利用 veritical-align 实现垂直居中

    示例如下

        <style>
        .main{
            border: solid 1px red;
            width: 400px;
            height: 400px;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        </style>
        <div class="main">
            <div>我居中了</div>
        </div>

    7. translate + absolute

    这种方法和方法三类似

    适用场景:多行文字垂直居中

    原理:利用绝对定位 top 和 left 50%,然后减去元素本身内容区的一半,就可以实现居中

    示例如下

        <style>
        .main{
            border: solid 1px red;
            width: 400px;
            height: 400px;
            position: fixed;
        }
        .content{
            position: absolute;
            background-color: yellow;
            width: 200px;
            height: 100px;
            transform: translate(-50%, -50%);
            top:50%;
            left: 50%;
        }
        </style>
        <div class="main">
            <div class="content"></div>
        </div>

    8. :before + inline-block

    适用场景:多对象垂直居中

    原理:利用 :before 伪类元素设定为 100% 高的 inline-block,再搭配上将需要居中的子元素同样设置成 inline-block 性质后,就能使用 vertical-align:middle 来达到垂直居中的目的了,该方法需要注意去掉 inline-block 元素之间的 4-5px 小空隙。

    示例如下

        <style>
        .main{
            border: solid 1px red;
            width: 400px;
            height: 400px;
            text-align: center;
        }
        .main::before{
            content: "";
            height: 100%;
            display: inline-block;
            vertical-align: middle;
            width: 0;
        }
        .content{
            background-color: yellow;
            width: 200px;
            height: 100px;
            display: inline-block;
            vertical-align: middle;
        }
        </style>
        <div class="main">
            <div class="content"></div>
        </div>

    参考文章

    CSS垂直居中技巧,我只会23个,你会几个?

    展开全文
  • 图片 CSS垂直居中

    2012-10-15 13:49:04
    图片 CSS垂直居中图片 CSS垂直居中
  • 23种CSS垂直居中技巧

    2020-09-22 11:19:48
    本文给大家分享23中css垂直居中的处理方法,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
  • css垂直居中怎么设?文字上下居中和图片垂直居中 css 居中分css垂直居中和css水平居中,水平居中平时比较常用,这里我们主要讲css上下居中的问题。垂直居中又分为css文字上下居中和css图片垂直居中,下面我们就分别来...

    css垂直居中怎么设?文字上下居中和图片垂直居中

    css 居中分css垂直居中和css水平居中,水平居中平时比较常用,这里我们主要讲css上下居中的问题。垂直居中又分为css文字上下居中和css图片垂直居中,下面我们就分别来介绍一下。

    css文字上下居中:一、单行内容的居中。只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height 和 height,并使两值相等,再加上 over-flow: hidden 就可以了。css代码为{height: 4em;line-height: 4em;overflow: hidden;}

    优点:1. 同时支持块级和内联极元素;2. 支持所有浏览器
      缺点:1. 只能显示一行;2. IE中不支持等的居中
      要注意的是:1. 使用相对高度定义你的 height 和 line-height;2. 不想毁了你的布局的话,overflow: hidden 一定要

    二、多行内容居中,且容器高度可变。也很简单,给出一致的 padding-bottom 和 padding-top 就行

    优点:1. 同时支持块级和内联极元素;2. 支持非文本内容;3. 支持所有浏览器
      缺点:容器不能固定高度

    css图片垂直居中,我们只需要在CSS样式中加入如下CSS代码:img{ vertical-align:middle;}
    [原文地址] https://www.cnblogs.com/ytkah/p/6424641.html

    展开全文
  • CSS垂直居中

    千次阅读 2016-03-20 13:36:47
    注:本文示例来自于百度前端学院的一个任务// 本文的dom结构 <div class="container"></div> ...// 共用css *{ margin: 0px; padding: 0px; } .container{ width: 400px; height: 200px; background: #ccc;

    注:本文示例来自于百度前端学院的一个任务

    // 本文的dom结构
    <body>
        <div class="container"></div>
    </body>
    // 共用css
    *{
        margin: 0px;
        padding: 0px;
    }
    .container{
        width: 400px;
        height: 200px;
        background: #ccc;
    }

    第一种的方式个人认为最为巧妙,也是比较难以理解的:
    先上代码:

    html, body{
        height: 100%;
    }
    .container{
        margin: auto;
        position: absolute; 
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
    }

    很多人都会惊呼这种垂直居中的方式,我想假若我们要实现水平居中那是很简单的只需要代码margin: auto;,但是我们仔细地想一想,这种方式为什么只能够使水平居中,而不能使垂直方向上居中,并且这种水平居中的原理是什么呢?
    为什么margin: auto不能使垂直居中?
    这里引用一下杜瑶大神(杜瑶个人站:http://www.doyoe.com/)的话:

    keyword auto默认是使用剩余空间,所以不论left还是right定义了auto,计算值都会是包含块的剩余空间,如果左右都设置了auto,那么就会均分剩余空间。当然,这指的是书写模式为lr-tb的情况下,这种情况,宽度是一定的。至于纵向,高度其实是没有一个固定值,auto无可refer的参照物,如果top或bottom设置了auto,那计算值其实会是0。

    我想杜瑶大神解释的已经很明了了,也是就是说我们的通常的书写模式是,自左至右,自上至下,在这种模式下,宽度是一定的(ps:个人认为 如div的流体特性就是一个很好的体现),但是我们的高度没有一个固定值,说白了我们上面的代码就是相当于margin: 0 auto;
    解决了第一个问题,那么为什么加上position: absolute; left: 0px;right: 0px;top: 0px;bottom: 0px;之后就可以了呢?
    好那么来一点一点的理解,首先要理解的是position: absolute;,网上很多的面试题会问相对定位于绝对定位的区别。
    我个人认为,区别有一下几点:
    1. 绝对定位脱离文档流,而相对定位仍在正常流中;
    2. 绝对定位相对于离它最近的非position值为static的祖先节点的左上角定位,最终root为浏览器的可以窗口。而相对定位是相当于节点自身的左上角来做定位。
    理解了这个问题的话,我们来看一下left: 0px;right:0px;top:0px;bottom:0px;的效果,这个效果就是为把我们的container节点的外边距拉到与浏览器可视口距离为0的位置,然后在结合上面杜瑶大大的那番话,我们就可以很好的理解为什么可以垂直居中,水平居中了。
    第二种方式就是利用我们css3中的一个新特性,那就是运用flex布局,这种布局的入门可以参见http://blog.csdn.net/zp1996323/article/details/50611462这边博客,下面我们就直接来看代码实现:

    html, body{
        height: 100%;
    }
    body{
        display: flex;
        justify-content: center; 
        align-items: center; 
    }

    这种垂直居中水平居中的实现方式固然简单,但是代价也是比较高的,我们的兼容性是ie11+。
    第三种实现方式,也是大家会普遍采用的方式:

    body{
        position: relative;
    }
    .container{
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -100px 0px 0px -200px;
        overflow: hidden;
    }

    第四种方式:marginrelative相结合:

    .container{
        position: relative;
        top: 50%;
        margin: -100px auto 0px;
    }

    第五种方式:利用css3的新特性transform

    .container{
        position: relative;
        top: 50%;
        margin: 0 auto;
        transform: translateY(-50%);
        overflow: hidden;
    }
    展开全文
  • 在做前端项目时CSS的水平居中我们经常使用,但有时还会用到CSS垂直居中,对于小白来说这个就有些难度了,下面看一下我是如何实现的
  • CSS垂直居中的8种方法

    2019-11-17 13:31:54
    CSS垂直居中的8种方法 1、通过verticle-align:middle实现CSS垂直居中。 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注...
  • 本文给大家带来的是5种使用CSS实现垂直居中的方法,虽然各有优缺点,但还都是蛮实用的,小伙伴们根据自己的项目情况,自由选择吧。
  • 利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面...
  • 摘要 在我们制作页面的时候经常会遇到内容垂直居中的需求今天分享 5 种垂直居中的方 法每种方法都有自己的优缺点 可以选择自己喜欢的方式 以下代码都经过本人亲自测试 line-height 代码如下 : <style> ....
  • CSS垂直居中的常用方法设定行高(line-height)添加伪元素(::before、::after)calc动态计算使用表格或假装表格transform绝对定位使用Flexbox 设定行高(line-height) 添加伪元素 calc动态计算 使用表格或假装...
  • 利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 69,182
精华内容 27,672
关键字:

css垂直居中