专栏首页cnblogs【垂直居中高级篇】你不知道的垂直居中方式

【垂直居中高级篇】你不知道的垂直居中方式

      在Css中对元素进行水平居中是很简单的,如果他是一个行内元素,对它的父元素应用text-align:center;如果是一个块级元素,就对自身应用margin:auto。然而如果要对一个元素进行垂直居中,想想就头皮发麻。本文主要探索以Css3为基础进行元素的垂直居中,对当下流行的几种技巧不做讨论,原因如下:

  • 表格布局法:需要用到一些冗余的HTML元素
  • 行内块法:这个方法Hack味道过浓。

一、基于绝对定位的垂直居中

  • 以下两种技巧都需要使用绝对定位
  • calc实现
    • 内容部分必须固定宽和高
  • translate实现
    • 内容部分可以自适应宽和高
    • 某些浏览器会导致元素模糊,可用transform-style:preserve-3d来修复,因为元素可能被放置在半个像素上
  • 示例代码:
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap{
            position: relative;
            width: 400px;
            height: 150px;
            border: 1px solid red;
        }
        .wrap .cont{
            position: absolute;
            top: calc(50% - 30px);
            left: calc(50% - 50px);
            width: 100px;
            height: 60px;
            background: gray;
        }

        .wrap02{
            position: relative;
            width: 400px;
            height: 150px;
            border: 1px solid red;
        }
        .wrap02 .cont{
            position: absolute;
            top: 50%;
            left: 50%; 
            transform: translate(-50%,-50%);
            background: gray;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="cont">这个内容部分需要定宽和定高</div>
    </div>
    <div class="wrap02">
        <div class="cont">这个内容部分可以实现自适应</div>
    </div>
</body>

二、视口垂直居中 + translate

  • 1vh表示视口高度的1%, 1vw表示视口的宽度的1%
  • 当宽度 小于 < 高度时,1vmin = 1vm, 否则 1vmin = 1vh
  • 当宽度 大于 > 高度时, 1vmax = 1vm,否则 1vmax = 1vh;
  • 内容部分必须要固定宽和高
  • 示例代码:
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap{
            width: 18em;
            background: lightgreen;
            padding: 1em 1.5em;
            margin: 50vh auto 0;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="wrap">
        这个只能做到视口居中
    </div>
</body>

三、FlexBox

  • 在flexbox时,用margin:auto可以实现水平和垂直居中,可以用 margin:0 auto设置水平居中;margin: auto 0设置垂直居中
  • 被居中元素的宽度和高度可以自适应
  • 也可以通过flex的align-items和justify-content来实现水平垂直居中
  • 示例代码:
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap01{
            display: flex;
            min-height: 10vh;
            border: 1px solid gray;
            width: 30vw;
        }
        .wrap01 .main{
            margin: auto;
            padding: 5px;
            background: lightblue;
        } 
        .wrap02{
            margin-top: 10px;
            width: 28em;
            height: 10em;
            display: flex;
            align-items: center;
            justify-content: center; 
            background: lightblue;
        }   
    </style>
</head>
<body>
    <div class="wrap01">
        <div class="main">
            flex + margin:auto实现垂直居中
        </div>
    </div>
    <div class="wrap02">
        flex的align-items(垂直对齐)和justify-content(水平对齐)<br/>实现垂直水平居中
    </div>
</body>

四、总结

经过上述介绍,我们发现各垂直居中的方式应用场景是有所不同的。

  • absolute + translate 和 flexbox可以实现内容部分宽高自应用;
  • absolute + calc 和 视口垂直居中,内容部分是需要固定宽高的;
  • 不同场景选择没的垂直居中方式很重要。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Css3新特性应用之过渡与动画

    一、缓动效果 学习和利用贝塞尔曲线,默认支持ease,ease-in,ease-out,ease-in-out和linear等 还提供一个cubic-beize...

    sam dragon
  • knockout源码分析之订阅

    一、主类关系图 ? 二、类职责 2.1、observable(普通监控对象类) observable(他其是一个function)的内部实现: 1.首先声明一个...

    sam dragon
  • directshow、 Emgucv入门

    本示例主要测试了directshow、Emgucv的视频流采集功能,其中Emgucv还实现了人脸的识别。示例源码下载 一、directshow的介绍 实现原理:...

    sam dragon
  • 前端学习(21)~css学习:如何让一个元素水平垂直居中?

    如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多。

    Vincent-yuan
  • js实现拖动组件移动效果

    今天我来给大家介绍一种js特效,这种特效是当你用鼠标点击组件移动到其他地方后,这个组件就定在了那个地方,这种效果通常用来做视图化排版的。下面我来把代码贴出来给大...

    无邪Z
  • 使用前置音响的固体电影屏幕如何工作

    本次演讲来自SMPTE 2019,演讲者是Julien Berry和Pierre Vincent。本次演讲的内容是使用前置音响的固体电影屏幕如何工作,目的是解决...

    用户1324186
  • VB6 调用Excel,并进行操作

    excelsheet.Application.Visible = True

    巴西_prince
  • AI新人必看 | 参数和超参数还分不清楚吗?

    计算机学科里有太多的术语,而且许多术语的使用并不一致。哪怕是相同的术语,不同学科的人理解一定有所不同。

    用户2769421
  • Android Linker学习笔记[转]

    Linker是Android系统动态库so的加载器/链接器,要想轻松地理解Android linker的运行机制,我们需要先熟悉ELF的文件结构,再了解ELF文...

    用户2930595
  • Nature社论:读博有害健康,三分之一博士生心理有问题

    本周,首届研究生心理健康国际会议将在英国布莱顿举行。这次会议为期两天,目标是解决一个简单而紧迫的问题:现在许多博士生和博士后研究人员处于过度劳累和精神过度紧张的...

    新智元

扫码关注云+社区

领取腾讯云代金券