页面设计中，经常需要实现元素的水平垂直居中，css实现的方法有很多(列如: margin: auto、position定位、css表达式calc()、使用css预处理、table等都可以实现水平居中)，但大多都是针对容器高度不固定，元素高度固定的情况。

这里我们介绍几种实现容器宽高和元素宽高都不固定的情况实现水平垂直居中

github代码片段地址: https://github.com/haozhaohang/library/tree/master/%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%ADdemo

一、flex实现水平垂直居中

 <!DOCTYPE html>

 <html>

 <head>

     <title>实现未知高度的垂直居中</title>

     <style>

         html, body {

             height: 100%;

         }

         .containers {

             width: 100%;

             height: 100%;

             display: flex;

             justify-content: center;

             align-items: center;

         }

     </style>

 </head>

 <body>

     <div class="containers">

         <span>flex实现垂直居中</span>

     </div>

 </body>

 </html>

容器设置display: flex;

容器内的元素设置 jusify-content: center；实现水平居中

　　　　　　　　align-items: center; 实现垂直居中

二、grid实现水平垂直居中（这可能是实现水平垂直居中最简单的css样式）

 <!DOCTYPE html>

 <html>

 <head>

     <title>实现未知高度的垂直居中</title>

     <style>

         html, body {

             height: 100%;

         }

         .containers {

             height: 100%;

             display: grid;

         }

         span {

             margin: auto;

         }

     </style>

 </head>

 <body>

     <div class="containers">

         <span>grid实现垂直居中(许这是最简洁的水平垂直居中的 CSS 样式)</span>

     </div>

 </body>

 </html>

目前浏览器的支持率，但是可以用在内部的管理系统，在指定的浏览器上运行

容器设置 display: grid;

容器元素设置 margin: auto； 实现水平垂直居中

css实现未知高度水平垂直居中的更多相关文章

  1. CSS之未知高度img垂直居中

    测试代码如下:(能够水平居中,通过text-align:center实现) <style>.box{ width:800px;height:600px;border:2px solid # ...

  2. css实现固定高度及未知高度文字垂直居中的完美解决方案

    在工作当中我们经常碰到类似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而我们最容易会想到使用表格来垂直居中,或者如果是单行文字 ...

  3. CSS解决未知高度垂直居中

    尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, Opera, Safari ...

  4. CSS实现未知高度图文混合垂直居中

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-26) CSS实现未知高度图文混合垂直居中,阅读CSS实现未知高度图文混合垂直居中. IE6,IE7,FF3测试通过 ...

  5. CSS布局：元素水平垂直居中

    CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...

  6. css知识笔记：水平垂直居中（别只看，请实操！！！）

    css实现元素的水平垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目 ...

  7. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  8. CSS：div/img水平垂直居中

    div水平垂直居中方法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  9. 巧用CSS居中未知高度的块元素

    在网页中让一个未知高度的块元素水平垂直居中是一个老生常谈的问题,但是总是有些特殊场景让你无法得心应手的实现居中,本文介绍几种常用的经典的居中方法,总有一种适合你! 1. position .paren ...

随机推荐

  1. linux 常用 掌握要点

    1.查看正在执行的进程(Process) ps命令 Process Status 进程状态 语法: ps  [option]  [--help] -A  列出所有的行程 -w  显示加宽可以显示较多的 ...

  2. [UWP]浅谈按钮设计

    一时兴起想谈谈UWP按钮的设计. 按钮是UI中最重要的元素之一,可能也是用得最多的交互元素.好的按钮设计可以有效提高用户体验,构造让人眼前一亮的UI.而且按钮通常不会影响布局,小小的按钮无论怎么改也不 ...

  3. AJAX跨域的常见方法

    由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只能访问本地的资源,而不能跨域访问.比如说你的网站域名是aaa.com,想要通过AJAX请求 ...

  4. asp.net core高级应用:TagHelper+Form

    上一篇博客我讲解了TagHelper的基本用法和自定义标签的生成,那么我就趁热打铁,和大家分享一下TagHelper的高级用法~~,大家也可以在我的博客下随意留言. 对于初步接触asp.net cor ...

  5. list-列表功能介绍

    叨逼叨:列表是可变的,针对列表的改变,变得是列表本身,和字符串区别开来 #1.追加 # name = ['alex','eric','seven','qiqi'] # v = name.append( ...

  6. Luogu 1894 [USACO4.2]完美的牛栏The Perfect Stall / POJ 1274 The Perfect Stall（二分图最大匹配）

    Luogu 1894 [USACO4.2]完美的牛栏The Perfect Stall / POJ 1274 The Perfect Stall(二分图最大匹配) Description 农夫约翰上个 ...

  7. ps_cc切片

    web前端开发的工作流程的第一步就是根据ui给的psd来还原设计图样貌. 可是一打开满屏的参考线.这时我们可以alt+v+d清空参考线 这时可以按alt+鼠标拖放图片.同时也可以按F进入半屏和匀速连按 ...

  8. 小哈学Python-第一课：基本介绍

    Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC ...

  9. Java并发编程笔记——技术点汇总

    目录 · 线程安全 · 线程安全的实现方法 · 互斥同步 · 非阻塞同步 · 无同步 · volatile关键字 · 线程间通信 · Object.wait()方法 · Object.notify() ...

  10. jenkins IOS- ad-hoc 打包

    背景 客户无大企业证书,只有开发者证书,如果进行开发分发测试只能采用两种方式 testfight ad-hoc打包 上testfight存在一定的审核时间,排除掉,最后选择打ad-hoc的包 解决 查 ...