单行文本

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

      #container{

          border: 1px solid #000;

          height: 300px;

          line-height: 300px;

      }

    </style>

<body>

   <div id="container">

        123123131

   </div>

</body>

</html>

多行文本+图片+任意大小的块

后面提供的3个例子中，只要把里面的#pic 的宽高去除，也是可以实现任意大小的div居中的。往里面填充任意的多行文字，也是可以居中的。

实际上，有这样的规律：

　　任意大小的div垂直居中 =》任意多行文字垂直居中 =》 固定大小的div垂直居中 =》图片垂直居中

css3

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        #container{

            border: 1px solid #000;

            height: 300px;

            /*display:-webkit-box;*/

            /*-webkit-box-align:center; !*上下对齐*!*/

            /*-webkit-box-pack:center;  !*左右对齐*!*/

            /*两种方式都可以居中*/

            display: flex;

            align-items: center;  /*垂直居中*/

            justify-content: center; /*水平居中*/

        }

        #pic{

            display: inline-block;

            width: 100px;

            height: 100px;

            border: 1px solid #000;

        }

    </style>

<body>

<div id="container">

    <br>

    33333333\

    <br>

    <div id="pic"></div>

</div>

</body>

</html>

运行结果：

 后者 

外部容器 tableCell（IE6不支持） + middle

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

      #container{

          border: 1px solid #000;

          height: 300px;

          display: table-cell;

          vertical-align: middle;

      }

        #pic{

            display: inline-block;

            width: 100px;

            height: 100px;

            border: 1px solid #000;

        }

    </style>

<body>

   <div id="container">

        123123131

       <br>

       33333333\

       <br>

        <div id="pic"></div>

   </div>

</body>

</html>

运行结果：

兼容ie6

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

      #container{

          border: 1px solid #000;

          height: 300px;

      }

        #pic{

            display: inline-block;

            width: 150px;

            vertical-align: middle;

            border: 1px solid #000;

        }

      #container:before{

          content:'';

          display: inline-block;

          height: 100%;

          width: 0;

          vertical-align: middle;

      }

    </style>

<body>

   <div id="container">

        <div id="pic" contenteditable>

            1231233 <br>

            1231233 <br>

            1231233 <br>

            1231233 <br>

            1231233 <br>

            1231233 <br>

        </div>

       1213

       <br>

   </div>

</body>

</html>

运行结果：

弹性布局

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        #container{

            border: 1px solid #000;

            height: 300px;

            justify-content:center;

            display: flex;

            flex-direction:column;

        }

        #pic{

            display: inline-block;

            width: 100px;

            height: 100px;

            border: 1px solid #000;

        }

    </style>

<body>

<div id="container">

    <br>

    33333333\

    <br>

    <div id="pic"></div>

</div>

</body>

</html>

运行结果：（往里面再套一个容器，实现水平居中，而容器是垂直居中，就可以实现内容屏幕居中了）

在flex布局之后比较新和重要的布局方式：grid

参考：https://juejin.im/entry/5894135c8fd9c5a19507f6a1

<style>

    #root{

        display: grid;

        position: fixed;

        width: 100%;

        height: 100%;

        align-content:center;  /*垂直居中*/

        justify-content :center;  /*水平居中*/

    }

</style>

<body>

  <div id="root">

      1212313122

  </div>

</body>

水平居中（前者必须指定宽度）

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        #container{

            border: 1px solid #000;

        }

        #pic{

            width: 100px;

            border: 1px solid #000;

            margin: 0 auto;

        }

        /*#container{*/

            /*border: 1px solid #000;*/

            /*text-align: center;*/

        /*}*/

        /*#pic{*/

            /*display: inline-block;*/

            /*border: 1px solid #000;*/

        /*}*/

    </style>

<body>

<div id="container">

    <div id="pic">1</div>

</div>

</body>

</html>

css搞定所有垂直居中问题的更多相关文章

  1. sass笔记-1|Sass是如何帮你又快又好地搞定CSS的

    Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...

  2. 一天搞定CSS---终篇CSS总结

    虽然说是一天搞定CSS,实际上也没有那么简单.只能说让你快速了解常见的CSS知识,解决基本的页面样式布局和设置. 每个独立的CSS知识点都比较简单,但是它们的应用非常灵活,特别是在综合应用中. 粗略说 ...

  3. 3D 穿梭效果？使用 CSS 轻松搞定

    背景 周末在家习惯性登陆 Apex,准备玩几盘.在登陆加速器的过程中,发现加速器到期了. 我一直用的腾讯网游加速器,然而点击充值按钮,提示最近客户端升级改造,暂不支持充值(这个操作把我震惊了~).只能 ...

  4. CSS布局之-水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...

  5. 使用纯CSS方案，解决垂直居中

    CSS是HTML元素的剪刀手,它极度的丰富了web页面的修饰.在众多CSS常见的样式需求中,有一奇葩式的存在[垂直居中],因为不管是从逻辑实现方面还是从正常需求量来讲,这都没理由让这个需求在实践过程中 ...

  6. 一劳永逸的搞定 FLEX 布局（转）

    一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮, ...

  7. 搞定flex布局

    这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求,比如实现水平居中可以使用 margin: 0 auto,实现水平垂直同时居中可以如下设置: .dad { position: relative ...

  8. 一劳永逸的搞定 flex 布局

    一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮, ...

  9. 解读 CSS 布局之水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...

随机推荐

  1. Linux--------------mysql的安装

    工具: 1>Centos6.8 2>Jdk1.7 3>Mysql5.7 1.下载mysql        wget http://dev.mysql.com/get/Download ...

  2. python实现希尔排序

    与插入排序的思想一致,插入排序是一个,希尔排序是多个插入排序! # @File: shell_sort import random def insert_sort_gap(li, d): for i ...

  3. Counting The Important Pairs CodeChef - TAPAIR

    https://vjudge.net/problem/CodeChef-TAPAIR 合法的删除方法: 第一种:桥边与其余任意边(1)桥*(桥-1)/2(两条桥边)(2)桥*(m-桥)(桥边+其他边) ...

  4. IOS-关闭（退）键盘事件--转

    方法: 1.手势(触背景)关闭键盘 -(void)tapBackground //在ViewDidLoad中调用{    UITapGestureRecognizer * tap = [[UITapG ...

  5. PoolManager插件(转载)

    http://www.xuanyusong.com/archives/2974 前几天我在博客里面分享了为什么Unity实例化很慢的原因,并且也分享了一个缓存池的工具.有朋友给我留言说PoolMana ...

  6. 基于Java实现的冒泡排序算法

    冒泡排序是一种简单基础的排序算法,相信在大学课堂里老师已经讲过了,现在我基于Java来实现一遍. 简述 冒泡排序正如其关键词一样,杂乱的气泡经过浮动,最后大的气泡飘到了上面而小的气泡在下面,无序的元素 ...

  7. JVM线程与Linux内核线程的映射[转]

    Linux从内核2.6开始使用NPTL (Native POSIX Thread Library)支持,但这时线程本质上还轻量级进程. Java里的线程是由JVM来管理的,它如何对应到操作系统的线程是 ...

  8. poj1190 生日蛋糕

    题意: 要制作一个体积为Nπ的M层生日蛋糕,每层都是一个圆柱体. 设从下往上数第i(1 <= i <= M)层蛋糕是半径为Ri, 高度为Hi的圆柱.当i < M时,要求Ri > ...

  9. Android手机屏幕投射到电脑神器Vysor

    做android开发的,经常要把手机屏幕投射到电脑,用来演示.普遍的解决方案是360或者豌豆荚的演示功能,缺点是延迟非常厉害,大概有3秒左右,非常影响演示效果.以下介绍Vysor,几乎0延迟,能与手机 ...

  10. springdata-jpa 八种查询方法

    使用:maven+Spring+jpa+Junit4 查询方式:SQL,JPQL查询,Specification多条件复杂查询 返回类型:list<POJO>,list<Stinrg ...