我们知道，实现元素的水平居中比较简单，在设置了宽度后，设置左右margin为auto就可以。 但是如何设置元素垂直居中呢？ 当然，对于单行的文字，可以通过设置line-height来解决， 可以对于一个块状元素来说，就没有那么简单。下面我们总结了一些实现 元素垂直水平都对齐的几种方式。

一、定位+负边距

html部分

  1. <body>
        <div class="box"></div>
    </body>

css部分

  1. .box{
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-150px;
        margin-top:-100px;
        padding:20px;
        width:300px;
        height:200px;
        background:#41D7FB;
    }

特点

  • 兼容性较好，能够兼容到IE6
  • 元素的宽高需要固定
  • 比较经典的垂直居中实现方式

二、定位+自适应边距

html部分

  1. <body>
        <div class="box"></div>
    </body>

css部分

  1. .box{
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        padding:20px;
        width:300px;
        height:200px;
        background:#41D7FB;
    }

特点

  • 兼容IE8以及以上浏览器
  • 元素宽高不需固定，可以随内容适应

三、定位+CSS3位移

html部分

  1. <body>
        <div class="box"></div>
    </body>

css部分

  1. .box{
        position:absolute;
        left:50%;
        top:50%;
        transform: translate(-50%, -50%);
        padding:20px;
        width:300px;
        height:200px;
        background:#41D7FB;
    }

特点

  • 由于使用了CSS3中的transform属性，需要IE9+浏览器
  • 元素宽高不需固定，可以随内容适应

四、Flex布局实现

html部分

  1. <body>
        <div class="box"></div>
    </body>

css部分

  1. html{
        display: flex;
        height: 100%;
        justify-content: center;
        align-items:center;
    }
    .box{
        padding:20px;
        width:300px;
        height:200px;
        background:#41D7FB;
    }

特点

  • 简单直接
  • 兼容性较差，需要IE10+
  • 父元素高度需要指定
  • 元素的宽高可以随内容适应

五、table-cell配合inline-block

html部分

  1. <body>
        <div class="table">
        <div class="table-row">
            <div class="table-cell">
            <div class="box"></div>
            </div>
        </div>
        </div>  
    </body>

css部分

  1. .table{
        display:table;
        width:100%;
        height:600px;
    }
    .table-row{
        display: table-row;
    }
    .table-cell{
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
  2.  
  3. .box{
        display: inline-block;
        padding:20px;
        width:300px;
        height:200px;
        background:#41D7FB;
    }

特点

  • 需IE8+兼容
  • 元素宽高可以随内容适应
  • 需设置较多的标签和css样式

CSS实现元素水平垂直居中的更多相关文章

  1. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  2. css 实现元素水平垂直居中总结5中方法

    个人总结,如有错误请指出,有好的建议请留言.o(^▽^)o 一.margin:0 auto:text-align:center:line-height方法 <div id="divAu ...

  3. CSS实现元素水平垂直居中—喜欢对称美，这病没得治

    [TOC] 在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用text-align:center;如果它是一个块级元素,就对它自身应用margin:auto.然而要对一 ...

  4. css：元素水平垂直居中的多种方式

    CSS元素(文本.图片)水平垂直居中方法   1.text-align:center; 2.margin:0 auto; 3.display:inline-block; + text-align:ce ...

  5. CSS实现元素水平/垂直居中的方法

    首先,我们来了解水平居中,它有很多种方法,我们暂时先来了解其中的几种: 1.    在实现方案中,我们最熟悉的莫过于给元素定义一个宽度,然后使用margin: 1 2 3 4 body{     wi ...

  6. css控制元素 水平垂直居中

    控制元素居中核心代码为 position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; css: /* 容器 */ .w ...

  7. CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）

    本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...

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

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

  9. css进阶 04-如何让一个元素水平垂直居中？

    04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...

随机推荐

  1. 在 Linux 中自动配置 IPv6 地址

    在 Linux 中自动配置 IPv6 地址 在本文中,我们将学习如何为 ULA 自动配置 IP 地址. 何时使用唯一本地地址 唯一本地地址unique local addresses(ULA)使用 f ...

  2. 字符串类型的日期转化为Date类型

    //方法一:内部引用package com.th.mobula.test; import java.text.ParseException;import java.text.SimpleDateFor ...

  3. 为了下载和使用最新的git,只好安装了迅雷

    一  安装迅雷时总感觉它的图标像是灰鸽子,让人不放心. 从https://git-scm.com/downloads上找到64-bit Git for Windows Setup的地址: https: ...

  4. python入门学习：9.文件和异常

    python入门学习:9.文件和异常 关键点:文件.异常 9.1 从文件中读取数据9.2 写入文件9.3 异常9.4 存储数据 9.1 从文件中读取数据 9.1.1 读取整个文件  首先创建一个pi_ ...

  5. Python代码分行问题

    可以用“\”符号把一行过长的Python代码分解成几行,多个语句也可以写在同一行,语句之间要用“;”隔开.

  6. python实现命令行解析的argparse的使用

    参考https://docs.python.org/3.6/library/argparse.html argparse模块使编写用户友好的命令行界面变得很容易.程序定义了它需要什么参数,argpar ...

  7. node.js使用express框架进行文件上传

    关于node.js使用express框架进行文件上传,主要来自于最近对Settings-Sync插件做的研究.目前的研究算是取得的比较好的进展.Settings-Sync中通过快捷键上传文件,其实主要 ...

  8. 给大家推荐一个C#下文件监听器和资源管理器的示例Demo-含源码

    C#下文件监听器和资源管理器的示例Demo:源码下载地址

  9. ind2sub

    ind2sub 线性索引的下标 语法 [I,J] = ind2sub(siz,IND)[I1,I2,I3,...,In] = ind2sub(siz,IND)   说明 ind2sub 函数确定与数组 ...

  10. 《Python神经网络编程》中文版PDF+英文版PDF+源代码,业界良心书

    下载:https://pan.baidu.com/s/1hI6wMPq4UFvEmpgF3ZV1jg 关于内容 这本书主要揭示神经网络背后的概念,并介绍如何通过Python实现神经网络.全书主要讲了三 ...