精华内容
参与话题
问答
  • CSS水平垂直居中常见方法总结

    万次阅读 多人点赞 2017-12-02 20:15:47
    css元素水平垂直居中

    说明:本篇文章只是总结一些方法,例子用到的各个元素属性不做解释,详情请看MDN文档,非常的详尽,例子在chrome浏览器下完全好使,IE这个渣渣
    附上链接:https://developer.mozilla.org/zh-CN/
    本文出现的错误,请大佬们及时指正,人非圣贤孰能无过,如有更好的方法,也请留言,我及时添加,哈哈!

    1、元素水平居中

    当然最好使的是:

    margin: 0 auto;

    居中不好使的原因:
    1、元素没有设置宽度,没有宽度怎么居中嘛!
    2、设置了宽度依然不好使,你设置的是行内元素吧,行内元素和块元素的区别以及如何将行内元素转换为块元素请看我的另一篇文章!
    示例 1:

    <div class="box">
        <div class="content">
            哇!居中了
        </div>
    </div>
    
    <style type="text/css">
    .box {
        background-color: #FF8C00;
        width: 300px;
        height: 300px;
        margin: 0 auto;
    }
    .content {
        background-color: #F00;
        width: 100px;
        height: 100px;
        line-height: 100px;//文字在块内垂直居中
        text-align: center;//文字居中
        margin: 0 auto;
    }
    </style>

    示例1

    2、元素水平垂直居中

    方案1:position 元素已知宽度
    父元素设置为:position: relative;
    子元素设置为:position: absolute;
    距上50%,据左50%,然后减去元素自身宽度的距离就可以实现
    示例 2:

    <div class="box">
        <div class="content">
        </div>
    </div>
    
    .box {
        background-color: #FF8C00;
        width: 300px;
        height: 300px;
        position: relative;
    }
    .content {
        background-color: #F00;
        width: 100px;
        height: 100px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -50px 0 0 -50px;
    }

    示例2

    方案2:position transform 元素未知宽度
    如果元素未知宽度,只需将上面例子中的margin: -50px 0 0 -50px;替换为:transform: translate(-50%,-50%);
    效果如上!
    示例 3:

    <div class="box">
        <div class="content">
        </div>
    </div>
    
    .box {
        background-color: #FF8C00;
        width: 300px;
        height: 300px;
        position: relative;
    }
    .content {
        background-color: #F00;
        width: 100px;
        height: 100px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }

    示例3

    方案3:flex布局
    示例 4:

    <div class="box">
        <div class="content">
        </div>
    </div>
    
    .box {
        background-color: #FF8C00;
        width: 300px;
        height: 300px;
        display: flex;//flex布局
        justify-content: center;//使子项目水平居中
        align-items: center;//使子项目垂直居中
    }
    .content {
        background-color: #F00;
        width: 100px;
        height: 100px;
    }

    示例4
    方案4:table-cell布局
    示例 5:
    因为table-cell相当与表格的td,td为行内元素,无法设置宽和高,所以嵌套一层,嵌套一层必须设置display: inline-block;td的背景覆盖了橘黄色,不推荐使用

    <div class="box">
        <div class="content">
            <div class="inner">
            </div>
        </div>
    </div>
    
    .box {
        background-color: #FF8C00;//橘黄色
        width: 300px;
        height: 300px;
        display: table;
    }
    .content {
        background-color: #F00;//红色
        display: table-cell;
        vertical-align: middle;//使子元素垂直居中
        text-align: center;//使子元素水平居中
    }
    .inner {
        background-color: #000;//黑色
        display: inline-block;
        width: 20%;
        height: 20%;
    }

    示例5

    展开全文
  • CSS 垂直居中

    千次阅读 2018-08-30 15:08:00
    前言 被这个问题折磨很久了,一直没有系统的整理,今天就系统的整理一下比较常用的,以后回顾的时候也可以参照 1. line-height 适用场景:单行文字,下拉框,按钮等 原理:将单行文字设置行高以后,文字会位于...

    前言

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

    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个,你会几个?

    展开全文
  • 我们在写页面时,通常会用到水平居中或垂直居中,而水平居中很好处理,不外乎就是设定 margin: 0 auto; 或是 text-align: center; “垂直居中”却比较麻烦,下面介绍七种纯 CSS 实现垂直居中的方式。 一、设定行高...

    我们在写页面时,通常会用到水平居中或垂直居中,而水平居中很好处理,不外乎就是设定 margin: 0 auto; 或是 text-align: center; “垂直居中”却比较麻烦,下面介绍七种纯 CSS 实现垂直居中的方式。

    一、设定行高(line-height)

    设定行高是垂直居中最简单的方式,适用于“单行”的“行内元素”(inline、inline-block),例如单行的标题,或是已经设为 inline-block 属性的 div,若将 line-height 设成和 height 一样的数值,则内容的行内元素就会被垂直居中,因为是行高,所以会在行内元素的上下都加上行高的1/2,所以就垂直居中了。不过由此就可以看出,为什么必须要单行的行内元素,因为如果多行,第二行与第一行的间距会变大,就不是我们所期望的效果了。

    代码示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>垂直居中1</title>
        <style>
            .box {
                width: 300px;
                height: 200px;
                border: 1px solid #000;
                line-height: 200px;
                text-align: center;
            }
            .vertical {
                display: inline-block;
                width: 30px;
                height: 30px;
                background: crimson;
            }
        </style>
    </head>
    <body>
        <h2>设定行高line-height实现垂直居中</h2>
        <div class="box">
            <div class="vertical"></div>
        </div>
    </body>
    </html>
    

    在这里插入图片描述

    二、添加伪元素(::before、::after)

    刚刚第一种方法,虽然是最简单的方法(适用于单行标题),不过就是只能单行,所以我们如果要让多行的元素也可以垂直居中,就必须要使用伪元素的方式。CSS 里头 vertical-align 这个属性虽然是垂直居中,不过却是指在元素内的所有元素垂直位置互相居中,并不是相对于外框的高度垂直居中。利用 ::before::after,让这个“伪” div 的高度为100%,就可以轻松地让其他的 div 都居中。不过 div 记得要把 display 设为 inline-block,毕竟 vertical-align:middle; 是针对行内元素,div 本身是 block。

    代码示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>垂直居中2</title>
        <style>
            .div0::before {
                content: "";
                width: 0;
                height: 100%;
                display: inline-block;
                position: relative;
                vertical-align: middle;
            }
            .div0 {
                width: 300px;
                height: 200px;
                border: 1px solid #000;
                text-align: center;
            }
            .redbox {
                width: 30px;
                height: 30px;
                background: red;
                display: inline-block;
                vertical-align: middle;
            }
            .greenbox {
                width: 30px;
                height: 60px;
                background: green;
                display: inline-block;
                vertical-align: middle;
            }
            .bluebox {
                width: 30px;
                height: 40px;
                background: blue;
                display: inline-block;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <h2>添加伪元素(::before、::after)</h2>
        <div class="div0">
            <div class="redbox"></div>
            <div class="greenbox"></div>
            <div class="bluebox"></div>
        </div>
    </body>
    </html>
    

    在这里插入图片描述

    三、calc动态计算

    看到这边或许会有疑问,如果 div 必须要是 block,该怎么让它垂直居中呢?这时候就必须用到 CSS 特有的 calc 动态计算的能力,我们只要让要居中的 div 的 top 属性,与上方的距离是“50%的外框高度+ 50%的 div 高度”,就可以做到垂直居中,至于为什么不用 margin-top,因为 margin 相对的是水平高度,必须要用 top 才会正确。注意使用:position: relative;

    代码示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>垂直居中3</title>
        <style>
            .div0 {
                width: 300px;
                height: 200px;
                border: 1px solid #000;
            }
            .redbox {
                width: 30px;
                height: 30px;
                background: red;
                position: relative;
                top: calc(50% - 15px);
                float: left;
                margin-left: calc(50% - 45px);
            }
            .greenbox {
                width: 30px;
                height: 60px;
                background: green;
                position: relative;
                top: calc(50% - 30px);
                float: left;
            }
            .bluebox {
                width: 30px;
                height: 40px;
                background: blue;
                position: relative;
                top: calc(50% - 20px);
                float: left;
            }
        </style>
    </head>
    <body>
        <h2>calc动态计算</h2>
        <div class="div0">
            <div class="redbox"></div>
            <div class="greenbox"></div>
            <div class="bluebox"></div>
        </div>
    </body>
    </html>
    

    在这里插入图片描述

    四、使用表格或假表格

    在表格这个 HTML 里面常用的 DOM 里头,要实现垂直居中是相当容易的,只需要加一行 vertical-align:middle 就可以,为什么呢?最主要的原因就在于 table 的 display 是 table ,而 td 的 display 是 table-cell ,所以我们除了直接使用表格之外,也可以将要垂直居中元素的父元素的 display 改为 table-cell ,就可以轻松达成,不过修改 display 有时候也会造成其他样式属性的连动影响,需要比较小心使用。

    代码示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>垂直居中4</title>
        <style>
            .like-table {
                display: table-cell;
            }
            td, .like-table {
                width: 300px;
                height: 200px;
                border: 1px solid #000;
                vertical-align: middle;
            }
            td div, .like-table div {
                width: 150px;
                height: 100px;
                margin: 0 auto;
                color: #ffffff;
                line-height: 100px;
                text-align: center;
                background: darkgreen;
            }
            .like-table div {
                background: crimson;
            }
        </style>
    </head>
    <body>
        <h2>使用表格或假表格</h2>
        <table>
            <tr>
                <td>
                    <div>表格垂直居中</div>
                </td>
            </tr>
        </table>
        <div class="like-table">
            <div>假的表格垂直居中</div>
        </div>
    </body>
    </html>
    

    在这里插入图片描述

    五、使用transform

    transform 是 CSS3 的新属性,主要掌管元素的变形、旋转和位移,利用 transform 里头的 translateY(改变垂直的位移,如果使用百分比为单位,则是以元素本身的长宽为基准),搭配元素本身的 top 属性,就可以做出垂直居中的效果,比较需要注意的地方是,子元素必须要加上 position: relative,不然就会没有效果

    代码示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>垂直居中5</title>
        <style>
            .use-transform {
                width: 300px;
                height: 200px;
                border: 1px solid #000000;
            }
            .use-transform div {
                position: relative;
                width: 100px;
                height: 50px;
                background: darkgreen;
                margin-left: calc(50% - 50px);
                top: 50%;
                transform: translateY(-50%);
            }
        </style>
    </head>
    <body>
        <h2>使用transform</h2>
        <div class="use-transform">
            <div></div>
        </div>
    </body>
    </html>
    

    在这里插入图片描述

    六、绝对定位

    绝对定位就是 CSS 里头的 position: absolute,利用绝对位置来指定,但垂直居中的做法又和我们正统的绝对位置不太相同,是要将上下左右的数值都设为0,再搭配一个 margin: auto,就可以办到垂直居中,不过要特别注意的是,设定绝对定位的子元素,其父元素的 position 必须要指定为 relative,而且绝对定位的元素是会互相覆盖的,所以如果内容元素较多,可能就会有些问题。

    代码示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>垂直居中6</title>
        <style>
            .use-absolute {
                position: relative;
                width: 300px;
                height: 200px;
                border: 1px solid #000000;
            }
            .use-absolute div {
                position: absolute;
                width: 100px;
                height: 50px;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                background: chocolate;
            }
        </style>
    </head>
    <body>
        <h2>绝对定位</h2>
        <div class="use-absolute">
            <div></div>
        </div>
    </body>
    </html>
    

    在这里插入图片描述

    七、使用Flexbox

    使用 align-itemsalign-content 的属性,轻轻松松就可以做到垂直居中的效果。

    代码示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>垂直居中7</title>
        <style>
            .use-flexbox {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 300px;
                height: 200px;
                border: 1px solid #000000;
            }
            .use-flexbox div {
                width: 100px;
                height: 50px;
                background: coral;
            }
        </style>
    </head>
    <body>
        <h2>使用Flexboxs</h2>
        <div class="use-flexbox">
            <div></div>
        </div>
    </body>
    </html>
    

    在这里插入图片描述
    以上就是一些垂直居中的方法,由于垂直居中往往会动用到修改 display 这个属性,往往也会在排版上造成一些影响,例如不该用 flexbox 的地方如果用了 flexbox,不该用 table 的地方用了 table,不该用 inline-block 的地方用了 inline-block,后续反而要多写许多其他的定位样式来修正,那就有点本末倒置了,因此如何活用这些 CSS 垂直居中的方法,就要看版面结构而灵活运用。

    博主水平有限,若发现文中存在问题,欢迎留言指正!

    学习之路永无止境!
    展开全文
  • 当然也可以用下面的方法下面说两种在屏幕正中(水平居中+垂直居中)的方法 放上示范的html代码:&amp;lt;body&amp;gt; &amp;lt;div class=&amp;quot;main&amp;quot;&amp;gt;

    最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。
    水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法

    下面说两种在屏幕正中(水平居中+垂直居中)的方法
    放上示范的html代码:

    <body>
    	<div class="main">
    		<h1>MAIN</h1>
    	</div>
    </body>
    
    • 方法一:

    div使用绝对布局,设置margin:auto;并设置top、left、right、bottom的值相等即可,不一定要都是0。

    .main{
    	text-align: center; /*让div内部文字居中*/
    	background-color: #fff;
    	border-radius: 20px;
    	width: 300px;
    	height: 350px;
    	margin: auto;
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    }
    

    效果如图:
    这里写图片描述

    • 方法二:
      仍然是绝对布局,让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了,效果图和上方相同。
     .main{
    	text-align: center;
    	background-color: #fff;
    	border-radius: 20px;
    	width: 300px;
    	height: 350px;
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	transform: translate(-50%,-50%);
    }
    
    • 方法三:
      对于水平居中,可以使用最简单的<center>标签,不过已经过时了,用法如下:
    <p><center>123</center></p>
    

    这个<center>标签就是相对于<p>标签里的文字,可以使其居中。

    由于center标签已经过时了,所以正规一点的话还是不建议使用的,可以使用如下的方式代替:

    <p style="text-align:center;">123</p>
    


    欢迎大家加入QQ群一起交流讨论,「吟游」程序人生——YinyouPoet
    展开全文
  • 在说垂直居中之前先看一下水平居中,相对于垂直居中来说水平居中就简单多了:  如果是一个行内元素,就对它的父级直接使用text-align: center;  如果是一个块级元素,就对它自身使用margin: auto; 说完水平居中...
  • div 垂直居中的六种方法

    万次阅读 2017-11-23 15:46:36
    利用CSS进行元素的水平...本文收集了六种利用css进行元素的垂直居中的方法,每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可。 Line-Height Method 试用:单行文本垂直居中,demo 代码:
  • //使子项目垂直居中 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF
  • 垂直水平居中的几种实现方式

    万次阅读 2018-08-13 10:46:46
    一、固定宽高: 1、margin 根据已知的宽高写死,不推荐 2、定位 + margin-top + margin-left .box-container{ position: relative; width: 300px; height: 300px; } .box-container .box { width:...
  • 垂直居中垂直居中

    2015-08-06 13:48:52
    <div class="content"><img src="img/不重样1.jpg"/> <!--方法二--> 这里里这里 <!--方法三--> <div class="floater"></div> 居中居中 </div>
  • CSS 元素垂直居中的 6种方法

    万次阅读 多人点赞 2012-05-30 09:56:06
    转自:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的...
  • 第一种方法:组合使用display:table-cell和vertical-align、text-align,使父元素内的所有行内元素水平垂直居中(内部div设置display:inline-block即可)这在子元素不确定宽度和高度时,特别适用哦 咳咳,敲黑板...
  • CSS水平居中+垂直居中+水平/垂直居中的方法总结

    万次阅读 多人点赞 2018-09-02 19:28:12
    垂直居中 单行的行内元素 多行的行内元素  块级元素 水平垂直居中 已知高度和宽度的元素 未知高度和宽度的元素 方案一:使用定位属性 方案二:使用flex布局实现 水平居中  行内元素 首先看它的父元....
  • 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; left...
  • 实现div里的img图片水平垂直居中

    万次阅读 多人点赞 2017-03-31 09:53:09
    body结构<body> <div> <...将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。<style type="text/css"> *{
  • 关于微信小程序文字水平垂直居中

    万次阅读 多人点赞 2018-06-02 22:36:38
    1.用line-height的值和view的height值一样wxml:&lt;view class='container'&gt; 这是个例子 &lt;/view&gt;wxss:.container{ border: 2rpx black solid; width: 400rpx;... line-h...
  • 设置TextView文字水平垂直居中 有2种方法可以设置TextView文字居中: 一:在xml文件设置:android:gravity="center" 二:在程序中设置:m_TxtTitle.setGravity(Gravity.CENTER); 备注:android:gravity和android:...
  • 前言:在网页布局中,经常遇到需要使元素居中对齐的时候,居中对齐的方式有:水平居中、垂直居中和水平垂直居中。这次,借此回顾总结一下,并在此记录下相关内容。 一、水平居中:  (1)行内元素的水平居中  ...
  • 最全CSS3实现水平垂直居中的10种方案

    万次阅读 多人点赞 2019-06-28 14:53:25
    最全的实现水平垂直居中方案
  • 水平垂直居中

    2017-11-01 23:30:48
    对需要水平垂直居中的元素写css:position : absolute; top : 50%; left : 50%; transform : translate(-50%,-50%);flex:对父级元素写css:单行居中:display : flex; justify-content : center; align-items : ...
  • 水平居中 1.行内元素:text-align:center; 2.定宽块状元素:margin:auto; 3.不定宽块状元素 a.使用table,margin:auto;将需要设置的元素加入table b.display:inline; c.父元素设置:position:relative;left...
  • 水平垂直居中方案与flexbox布局

    千次阅读 2017-02-09 08:37:48
    水平垂直居中方案与flexbox布局
  • 一、水平居中  1、行内元素水平居中 text-align :center  2、块级元素水平居中 margin:0 auto   3、多个块状元素的水平居中  实现多个水平排列的块状元素的水平居中,是将要水平排列的块状元素设为display...
  • 包括水平居中,垂直居中,还有水平垂直居中。 如果要再要细分,还要分浮动元素、绝对定位的居中。 为了代码简介,没有加背景和其他样式,需要看效果的,可以加上背景。 目录: 第一部分:水平居中 1、常规...
  • 解读CSS布局之-水平垂直居中

    千次阅读 2016-02-20 09:58:43
    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法。另外,文中的css都是用less书写的,如果看不懂less,可以把我给的demo链接打开,...
  • div内图片和文字水平垂直居中

    万次阅读 2017-11-29 17:32:36
    大小不固定的图片、多行文字的水平垂直居中 本文综述 想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你...
  • 水平居中 默认html: <div class="parent"> <div class="child">child</div> </div> 默认css: .parent{ width: 400px; height: 80px; line-height: 80px; background: #...
  • 让元素水平垂直居中的四种方法

    千次阅读 2019-06-12 09:09:11
    让元素水平垂直居中的3种方法前言一、使用弹性布局二、使用 transform三、使用绝对定位四、总结 前言 让元素水平居中有很多方法,比如设置 text-align:center;比如设置margin:auto再比如使用弹性布局,display:flex...
  • div中内容水平垂直居中

    千次阅读 2017-10-20 15:45:16
    1. div高度自适应的情况  div在不设置高度的时候,会被里面... 想要看的更直观些,只需要加上padding元素,内容四周便会留下空白,实现水平垂直居中的效果  css代码如下: .demo{ width: 200px; border: 1px
  • canvas水平垂直居中

    千次阅读 2018-10-29 09:05:18
    完整的例子如下: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&... ba
  • 包括水平居中,垂直居中,还有水平垂直居中。 如果要再要细分,还要分浮动元素、绝对定位的居中。 为了代码简介,没有加背景和其他样式,需要看效果的,可以加上背景。 目录: 第一部分:水平居中 1、...

空空如也

1 2 3 4 5 ... 20
收藏数 97,799
精华内容 39,119
关键字:

垂直居中