单行文本

<!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. bzoj 3573: [Hnoi2014]米特运输【树形dp+瞎搞】

    阅读理解题,题意是以1为根的有根树,每个点有点权,求修改最少点权能使每个点的权值等于其所有子节点权值之和并且每个点的所有子节点权值相等的个数 然后就比较简单了,就是有个技巧是数太大,需要对所有操作都取 ...

  2. Luogu P1069细胞分裂【分解质因数/数论】By cellur925

    题目传送门 发现这题真的坑超多啊...调了一晚上终于过了...我好菜啊qwq. 题意说的比较明白,让你求满足(si^k)%(m1^m2)==0的最小k值.然后看数据范围我们知道,我们肯定不能暴力的判断 ...

  3. scrapy 用法总结

    待更新: 建立python开发虚拟环境 virtualenv  mkvirtualenv --python=the-path-to-the-python-you-want-to use 安装: 使用p ...

  4. Eclipse新建Maven webapp项目错误的解决方法

    新建webapp项目时出现如下错误: 解决步骤如下: 1.  右键点击项目,选择Properties,点击Java Build Path,将默认的JRE移除,点击右侧add Library,选择JRE ...

  5. iOS 跷跷板动画 Seesaw Animation

    Xcode Playgound示例代码: let testView = UIView() testView.frame = CGRect.init(x: , y: , width: , height: ...

  6. linux下使用svn创建版本库和权限管理

    linux上的svn服务端如何和本地的电脑客户端结合使用 Linux上安装SVN服务器: 第一步:检查是否已安装 # rpm -qa subversion 第二步: 通过yum命令安装svnserve ...

  7. hihocoder1744 hohahola

    思路: 二分. 实现: #include <bits/stdc++.h> using namespace std; typedef long long ll; const ll INF = ...

  8. Java网络编程学习笔记

    Java网络编程,我们先来看下面这一张图: 由图可得:想要进行网络编程,首先是服务器端通过ServerSocket对某一个端口进行监听.通过accept来判断是否有客户端与其相连.若成功连上,则通过r ...

  9. CMSIS的简介

    Cortex微控制器软件接口标准(Cortex Microcontroller Software Interface Standard)是ARM和一些编译器厂家以及半导体厂家共同遵循的一套标准,是由A ...

  10. IOS代码收集

    http://mobile.51cto.com/hot-410417.htm 退回输入键盘: - (BOOL) textFieldShouldReturn:(id)textField{ [textFi ...