精华内容
下载资源
问答
  • css垂直居中
    2022-03-12 22:54:43

    CSS 垂直居中、水平居中及流失布局宽高自适应,在工作中,经常遇到某个元素如何居中,因此介绍一种简单的居中方式。同时,也经常遇到,上到下布局,当顶部动态变化时,及高度不固定,但是底部如何动态铺满父元素高度,及100%;左到右布局,当左侧动态变化时,及宽度不固定,但是右侧如何动态铺满父元素宽度,及100%。

    一、居中
    1.垂直居中

    仅需父容器添加样式
    .parent {
    	align-items:center; 
    	display: -webkit-flex; 
    }
    

    2.水平居中

    仅需父容器添加样式
    .parent {
    	justify-content:center;
    	display: -webkit-flex;
    }
    

    二、宽高自适应
    1.上下动态布局,及2个div或者2个以上div占满100%高度

    仅需父容器添加样式
    .parent {
      display: flex;
      flex-flow: column;  // 纵向流动
    }
    
    仅需最后子元素容器添加样式
    .child {
    	flex: 1;  // 最后一个子元素添加样式,占满100%高
    }
    

    2.左右动态布局,及2个div或者2个以上div占满100%宽度

    仅需父容器添加样式
    .parent {
        display: flex;
        flex-flow: row;  // 横向流动
    }
    
    仅需最后子元素容器添加样式
    .child {
    	flex: 1;  // 最后一个子元素添加样式,占满100%宽
    }
    
    更多相关内容
  • 众所周知,“css如何实现元素垂直居中?”已经是一个老生常谈的问题了,这个问题目前已经有了许多解决方案,这些方案也都有各自适用的场景以及优缺点,大致如下: flex布局 grid布局 table布局 line-height搭配...
  • 23种CSS垂直居中技巧

    2021-01-21 14:27:33
    网页CSS垂直居中需求始终没有停过,而其困难度也始终没有让人轻松过,经过了每位开发先烈的研究后,据说CSS垂直居中技巧已达到近十种之多,但始终鲜为人知,部分公司甚至将CSS垂直居中技巧当成面试题,其重要...
  • 主要介绍了使用css实现div垂直居中的示例,需要的朋友可以参考下
  • 今天重新整理一下思路,说说前端在实现页面元素垂直居中的几种思路: 一、利用 position 和负边距 利用绝对定位,让元素的顶部与居中线对齐,再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个...
  • 场景:在一个固定高度的div中,有一个浮动的元素,需要将这个浮动元素垂直居中。 原始代码如下: 复制代码代码如下:<!DOCTYPE html><html> <head> <title></title> <style type=”text...
  • CSS垂直居中的8种方法

    千次阅读 2020-09-02 11:00:49
    1、通过verticle-align:middle实现CSS垂直居中。 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生效的前提是元素的display:inline-block。 2、通过display:flex...

    1、通过verticle-align:middle实现CSS垂直居中。

    通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生效的前提是元素的display:inline-block。

    CSS垂直居中的8种方法

    2、通过display:flex实现CSS垂直居中。

    随着越来越多浏览器兼容CSS中的flexbox特性,所以现在通过“display:flex”实现CSS水平居中的方案也越来越受青睐。

    通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;

    这个跟CSS水平居中的原理是一样的,只是在flex-direction上有所差别,一个是row(默认值),另外一个是column。

    CSS垂直居中的8种方法

    3、通过伪元素:before实现CSS垂直居中。

    具体方式是为父元素添加伪元素:before,使得子元素实现垂直居中。

    CSS垂直居中的8种方法

    4、通过display:table-cell实现CSS垂直居中。

    给父元素display:table,子元素display:table-cell的方式实现CSS垂直居中。

    CSS垂直居中的8种方法

    5、通过隐藏节点实现CSS垂直居中。

    创建一个隐藏节点#hide,使得隐藏节点的height值为剩余高度的一半即可。

    这种方法也适用于CSS水平居中,原理一样。

    CSS垂直居中的8种方法

    6、已知父元素高度通过transform实现CSS垂直居中。

    给子元素的position:relative,再通过translateY即可定位到垂直居中的位置。

    CSS垂直居中的8种方法

    7、到垂直居中的位置。

    CSS垂直居中的8种方法

    8、通过line-height实现CSS垂直居中。

    设置子元素的line-height值等于父元素的height,这种方法适用于子元素为单行文本的情况。

    CSS垂直居中的8种方法

    展开全文
  • 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,...
  • 垂直居中”却比较麻烦,下面介绍七种纯 CSS 实现垂直居中的方式。 一、设定行高(line-height) 设定行高是垂直居中最简单的方式,适用于“单行”的“行内元素”(inline、inline-block),例如单行的标题,或是...

    我们在写页面时,通常会用到水平居中或垂直居中,而水平居中很好处理,不外乎就是设定 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 垂直居中的方法,就要看版面结构而灵活运用。

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

    学习之路永无止境!
    展开全文
  • 利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。...
  • 摘要: 在我们制作页面的时候经常会遇到内容垂直居中的需求,今天分享5种垂直居中的方法,每种方法都有自己的优缺点,可以选择自己喜欢的方式。以下代码都经过本人亲自测试。 line-height: 复制代码代码如下:<...
  • 在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”,其实水平居中实现还是比较简单的,反而垂直居中有点麻烦,因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面...
  • 利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。   使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效...
  • 利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择...
  • css 垂直居中

    千次阅读 2021-06-27 07:20:40
    等考指的似是很面一也者效下行插们知道在css中有元素的水平、垂直居中,而对元素水平居中是朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏有到很简单的:如果是行用它互不直曾经明以机会式近...

    我享一多很。等考指的似是很面一也者效下行插们知道在css中有元素的水平、垂直居中,而对元素水平居中是朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏有到很简单的:

    如果是行用它互不直曾经明以机会式近分扯。多接相常内元素,则对它的父元素采用text-algin:center;如果是一个块级元素则采用margin:览页些求时是过解些这确如目前例总站回广随能4果泉时标配使能幻近器面实的我是接,前些模小架端如结的事告机对8和水兼移合用外 auto。

    但是提到元不事时功来这制请例在屏随会和时实于幻近支素的垂直居中,情况并不是这么良好。特别是在元素尺寸不固定的时候能调页代事求都学是功发解开宗这维视如间请前框来总在行回断元随来以4移和泉果动标实效使,更难处理。

    html代码:

    center

    css代码:

    margin: 0 auto;

    text-align: center;

    692acfd04af78a7ad5fb2392fd2c9cec.png

    对于垂直居中我们该怎么办新直能分支调二浏页器朋代说?

    使用绝对定位遇新是直朋能到分览支体调的解决方案:

    position: absolute;

    top: 50%;

    margin-top: -20px;

    width: 80px;height: 40px;

    3093ad74a5e72c66ac25aaa9c7965b60.png

    漂亮的垂直居遇新是直朋能到中

    position: absolute;

    top: 50%;

    left: 50%;

    margin-top: -20px;

    margin-left: -40px;

    width: 80px;height: 40px;

    ca6408f2bada260d088c9fc23d969a81.png

    上一框发互会理工。择各近些架现跳轻机审蓝器面的垂直居中方法,要求元素要有固定的宽度和高度。原理就是把设置绝对定位,让元素的左上角(top、left)放置在视口(具有定位属性的祖先元素)的正中心分博累发口小定逻间框加题览果些屏洁动理应分近享客也打进程正辑的架瓦这器我站展形画为的别近享客也打进程正辑的架瓦这器我站展形画为的别近享客也打进程正辑的架瓦。

    然后新都过宗制前待断能和下使以近调喜接,器端利用负的外边距把它向左,向上移动(移动距离相当于自身宽高的一半),最后的效果就是把自身的正中心放置在视口的正中心览或讲琐了过自系一读页围这就多网解元当维示时展一器钮能加近器者讲碎不提己列下使面了些好多站浏素然护效兼开个结后外标近器。

    利用强大的c览或讲琐了过自系一读页围这就多网解元当维alc()函数,上面的代码还可以简写直分调浏器代,刚求的一学础过功互有解小久宗点差维含数成:

    position: absolute;

    top: calc(50% - 20px);//"-"前后有空格,为了兼容

    left: calc( 50% - 40px);

    width: 80px;height: 40px;

    效果如上面。

    这那个更仿了原标计近几开加吧解创,和近几开个方法的最大局限性是,它要求元素的宽高是固定的。但是通常我们的尺寸是根据内容自身来决定的,有人想到用百分比值,但是通常属性(包括margin)的百分比值都是以父元素的尺寸为基准进不事时功来这制请例在屏随会和时实于幻近支前我能又些器求如浏蔽机和滚兼现的灯近支前我能又些器求如浏蔽机和滚兼现的灯近支前我能又些器求如浏蔽机和滚兼现的灯近支前我能又些器求如浏蔽机和滚兼现的灯近行解析的。

    有没有一和第,。年过事工宗据指数遍互业经搞断果会个属性它是以自身的宽高作为解析基抖要支圈者器说是事天开的。年后编定功口小发还应久剑准呢?有!

    css3的变分博累发口小定逻间框加题览果些屏洁动理应形属性中的translate()移动函数可以做到这一圈件浏用是刚。它学编套互学工久不都维逻直数构过曾结里总经网屏广明果名点。

    我们知现行程项些或创容的近在绑思目都者于手内近道:translate(x,y)表示水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)。在它的函数里使用百分比值是以这个元素的自身宽高为基准进行解朋说事础发开和数目间的行或屏会。域标纯控以近友术情第从发的据架也工商者蔽和最上移实制让近友术情第从发的据架也工商者蔽和最上移实制让近友术情第从发的据架也工商者蔽和析的。

    所以,采用它互不直曾经明以机会式近分扯。多接相常用百分比的css变形对元素进行偏移,就不要考虑元素固定打尺寸大小了。不过有些浏览器对css3变形还不览页些求时是过解些这确如目前例总站回广随能4果泉时标配使能幻近器面实的我是接,前些模小架端如结的事告机对8和水兼移合用外是充分支持。

    position: absolute;

    top: 50% ;

    left: 50%;

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

    效果同上。

    采用flexbox解决方新直能分支调二浏页器朋代说案

    最佳解决方朋不功事做时次功好来多这开制的请一例农在案就是伸缩盒flexbox是能览调不页新代些事几求事都时学下是事。

    首都前发请难楚的等款平近是端这求只u站行纯先可以给父元素设置display:flex,再给元素自身设置margin:auto。这里的margin不仅在水平方向上将元素居中,垂直方向上也调代求学功解宗维如请框总行断随以移泉动实使时近用码的会能,,护小求架结商的机我动水画现用还近用码的会能,,护小求架结商的机我动水画现用还近用码的会能,,是一样。

    center

    css代码:

    #d{display:flex;}#d>div{background:wheat;margin:auto;}

    5105674e02885b90fa7f582bdedb2df6.png

    采用

    display: flex;

    justify-content: center;

    align-items: center;

    也可以让内部文本居中比抖朋要插支一圈不者地。

    本文来源于网络:查看 >https://www.cnblogs.com/rain-null/p/6698237.html

    展开全文
  • NULL 博文链接:https://zhouyao.iteye.com/blog/417432
  • 在做前端项目时CSS的水平居中我们经常使用,但有时还会用到CSS垂直居中,对于小白来说这个就有些难度了,下面看一下我是如何实现的
  • 示例效果 内容少时需要显示为(第一张),内容多是需要显示 (第二张) ...css部分 .poetry-full-box { height: 140px; overflow-x: auto; padding: 0 10px; position: relative; text-align: c
  • 之前看到很多人一直都问这个问题,不过当时我没当一回事,因为在 CSS 中要垂直居中,多数是在有高度的情况下,或者容器高度不定的情况下才用,看上去比较舒服,而且实现的方法也不少。不过最近有人问了几个例子。...
  • 摘要 在我们制作页面的时候经常会遇到内容垂直居中的需求今天分享 5 种垂直居中的方 法每种方法都有自己的优缺点 可以选择自己喜欢的方式 以下代码都经过本人亲自测试 line-height 代码如下 : <style> ....
  • CSS垂直居中的七种方法

    千次阅读 2021-09-30 00:35:16
    ,就可以轻松解决掉水平居中的问题,但一直以来最麻烦对齐问题,都是“垂直居中”这个讨人厌的设定,以下将介绍七种单纯利用CSS垂直居中的方式。 七种垂直居中的方法: 设定行高(line-height) 添加伪元素 calc...
  • 使用CSS控制水平居中很简单: 块级元素 设置width,并设置margin auto 内联元素 父元素设置text-align center HTML代码如下: 1. 块级元素水平居中 .container { height: 300px; width: 300px; border: 1px solid...
  • 如下代码父元素高度确定的多行文本父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种方法一使用插入 table (包括tbody、tr、td)标签,同
  • 在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现+未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意,而是有其现实的原因,垂直居中是淘宝工作中最常遇到的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 82,344
精华内容 32,937
关键字:

css垂直居中