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

一、定位+负边距

html部分

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

css部分

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

特点

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

二、定位+自适应边距

html部分

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

css部分

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

特点

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

三、定位+CSS3位移

html部分

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

css部分

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

特点

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

四、Flex布局实现

html部分

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

css部分

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部分

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

css部分

.table{
    display:table;
    width:100%;
    height:600px;
}
.table-row{
    display: table-row;
}
.table-cell{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.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系统运行何种系统管理程序

    如何弄清Linux系统运行何种系统管理程序 虽然我们经常听到系统管理器System Manager这词,但很少有人深究其确切意义.现在我们将向你展示其区别. 我会尽自己所能来解释清楚一切.我们大多都知 ...

  2. Linux之权限详解

    如何知道你有什么权限 我能干什么?这是我最关心的问题! 切换到普通用户 [root@luffy-01 ~]# su - pizza [pizza@luffy-01 ~]$ ls /root ls: c ...

  3. 001_HTTP参数中Etag的重要性

    在研究tornado时,有个Etag比较好奇,从网上查询摘录如下:

  4. node.js服务端程序在Linux上持久运行

    如果要想在服务端部署node.js程序,让其持久化运行,就不能单单使用npm start命令运行,当然了,这样运行是毫无问题的,但是当关闭xshell窗口或者是关闭进程的时候(其实关闭xshell窗口 ...

  5. AI VGG16

    VGG(Visual Geometry Group) 16 参考链接: https://arxiv.org/abs/1409.1556

  6. 环境部署（三）：Linux下安装Git

    Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理,是目前使用范围最广的版本管理工具. 这篇博客,介绍下Linux下安装Git的步骤,仅供参考,当然,还是yum安装 ...

  7. Java关键字(五)——this

    this 也是Java中的一个关键字,在<Java编程思想>第四版第五章5.4小节对 this 关键字是这样介绍的: this 关键字只能在方法内部使用,表示对“调用方法的那个对象”的引用 ...

  8. Storm-HA 配置

    进入storm/conf目录,修改storm.yaml配置文件为如下内容: # zookeeper ip storm.zookeeper.servers: - "192.168.7.108& ...

  9. Luogu P4323 [JSOI2016]独特的树叶

    一道比较好的树Hash的题目,提供一种不一样的Hash方法. 首先无根树的同构判断一般的做法只有树Hash,所以不会的同学可以做了Luogu P5043 [模板]树同构([BJOI2015]树的同构) ...

  10. Jlink使用技巧之单独下载HEX文件到单片机

    前言 上一篇文章介绍了使用Keil下载单独的Hex文件到单片机内,本篇文章介绍,如何使用SEGGER官方软件JFlash来进行程序的下载,支持Hex和Bin文件. JFlash的下载和安装 首先,安装 ...