我们知道，实现元素的水平居中比较简单，在设置了宽度后，设置左右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. 设计模式のObserver Pattern（观察者模式）----行为模式

    一.问题产生背景 又被称为订阅发布模式. 最初流传最广的一个面试题:有一只猫咪,猫咪叫了一声,老鼠跑了,老人惊醒了,男主人骂,小偷吓得不敢动了....这就产生一个问题的模型,当对象间存在一对多关系时, ...

  2. P2068 统计和（树状数组模板）

    这是一道树状数组题 #include<iostream> using namespace std; ; int tree[maxn], n, m; char h; int x, y; vo ...

  3. 5-servlet简介

    一.servlet1.是什么:java程序来处理页面请求和响应2.实现方式: a.实现Servlet接口 b.继承HttpServlet类 3.步骤: a.创建一个java程序实现Servlet或者继 ...

  4. Flask路由报错：raise FormDataRoutingRedirect(request)

    raise FormDataRoutingRedirect(request)FormDataRoutingRedirect: A request was sent to this URL (http: ...

  5. sendmail简单配置

    yum -y install sendmail sendmail-cfservice sendmail startservice saslauthd statusif [ $? -ne 0 ];the ...

  6. AI 可视化

    可视化 参考链接: http://www.tensorfly.cn/tfdoc/how_tos/summaries_and_tensorboard.html

  7. Mybatis学习总结（九）——查询缓存

    一.什么是查询缓存 mybatis提供查询缓存,用于减轻数据压力,提高数据库性能.mybaits提供一级缓存和二级缓存. 1.一级缓存是sqlSession级别的缓存.在操作数据库时需要构造sqlSe ...

  8. 1、话说linux内核

    1.内核和发行版的区别 到底什么是操作系统 linux.windows.android.ucos就是操作系统 操作系统本质上是一个程序,由很多个源文件构成,需要编译连接成操作系统程序(vmlinz.z ...

  9. 前端面试送命题（二）-callback，promise，generator，async-await

    前言 本篇文章适合前端架构师,或者进阶的前端开发人员:我在面试vmware前端架构师的时候,被问到关于callback,promise,generator,async-await的问题. 首先我们回顾 ...

  10. Asp.Net Core实战(干货)

    序言 使用.NET Core,团队可以更容易专注的在.net core上工作.比如核心类库(如System.Collections)的更改仍然需要与.NET Framework相同的活力,但是ASP. ...