我们知道，实现元素的水平居中比较简单，在设置了宽度后，设置左右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. 数以亿计运行PHP的网站即将面临严重的安全风险

    数以亿计运行PHP的网站即将面临严重的安全风险 根据W3Techs的统计数据,目前所有互联网站点中约有78.9%使用PHP运行.但是2018年12月31日,PHP 5.6.x的安全支持将正式停止,标志 ...

  2. CentOS 7 安装telnet服务

    今天测试zabbix需要用到telnet服务,查询到Centos7下下载安装telnet服务的方法,特此整理记录! 一.通过yum下载安装telnet yum -y install xinetd te ...

  3. TLB的作用及工作过程

    下面内容摘自<步步惊芯--软核处理器内部设计分析>一书          页表一般都非常大,而且存放在内存中,所以处理器引入MMU后,读取指令.数据须要訪问两次内存:首先通过查询页表得到物 ...

  4. 关于图片的Base64编码

    什么是Base64编码 Base64编码是一种图片处理格式,通过特定的算法将图片编码成一长串字符串,在页面上显示的时候,可以用该字符串来代替图片的url属性. base64编码就是长得像下面这样子的代 ...

  5. UVA140-Bandwidth（搜索剪枝）

    Problem UVA140-Bandwidth Time Limit: 3000 mSec  Problem Description Given a graph (V, E) where V is ...

  6. pandas 选择列或者添加列生成新的DataFrame

    选择某些列 import pandas as pd # 从Excel中读取数据,生成DataFrame数据 # 导入Excel路径和sheet name df = pd.read_excel(exce ...

  7. BZOJ3378:[USACO]MooFest 狂欢节(树状数组)

    Description 每一年,约翰的N(1≤N≤20000)只奶牛参加奶牛狂欢节．这是一个全世界奶牛都参加的大联欢．狂欢节包括很多有趣的活动,比如干草堆叠大赛.跳牛栏大赛,奶牛之间有时还相互扎屁股取 ...

  8. P1824 进击的奶牛（二分）

    思路:把检验的函数说一下,就是检测的距离x时,是否存在c个隔断相离大于等于x,如果是则返回1,不是则返回0 #include<iostream> #include<cstdio> ...

  9. 用户对动态PHP网页访问过程，以及nginx解析php步骤

    www.example.com | Nginx | 路由到www.example.com/index.php | 加载nginx的fast-cgi模块 | fast-cgi监听127.0.0.1:90 ...

  10. 【vue】vue +element 实现批量删除

    相关资料:http://blog.csdn.net/eagle_88/article/details/70238836 作者:smile.轉角 QQ:493177502