一、如果是已知宽高的元素做水平/垂直居中效果的话，可以直接用具体的数值指定定位布局或偏移布局，这个就不过多讨论。这里主要介绍在不知宽高或需要弹性布局下的几种实现方式。

二、
1.table表格法
思路：显示设置父元素为：table，子元素为：cell-table，vertical-align: center
优点：父元素（parent）可以动态的改变高度（table元素的特性）
缺点：IE8以下不支持
代码实现：

.parent1{

    display: table;

    height:300px;

    width: 300px;

    background-color: red;

}

.parent1 .child{

    display: table-cell;

    vertical-align: middle;

    text-align: center;

    color: #fff;

    font-size: 16px;

}

</style>

<body>

    <div class="parent1">

        <div class="child">hello world-1</div>

    </div>

</body>

效果：

2.空元素法
思路：使用一个空标签span设置他的vertical-align基准线为中间，并且让他为inline-block，宽度为0
缺点：多了一个没用的空标签，display:inline-blockIE 6 7是不支持的(添加上：_zoom1;*display:inline)。当然也可以使用伪元素来代替span标签，不过IE支持也不好

代码实现：

<style>

.parent2{

    height:300px;

    width: 300px;

    text-align: center;

    background: red;

}

.parent2 span{

    display: inline-block;;

    width: 0;

    height: 100%;

    vertical-align: middle;

    zoom: 1;/*BFC*/

    *display: inline;

}

.parent2 .child{

    display: inline-block;

    color: #fff;

    zoom: 1;/*BFC*/

    *display: inline;

}

</style>

<body>

    <div class="parent2">

        <span></span>

        <div class="child">hello world-2</div>

    </div>

</body>

效果：

3.-50%定位法
思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%)
优点：高大上,可以在webkit内核的浏览器中使用
缺点：不支持IE9以下不支持transform属性

代码实现：

<style>

.parent3{

    position: relative;

    height:300px;

    width: 300px;

    background: red;

}

.parent3 .child{

    position: absolute;

    top: 50%;

    left: 50%;

    color: #fff;

    transform: translate(-50%, -50%);

}

</style>

<body>

<div class="parent3">

        <div class="child">hello world-3</div>

    </div>

</body>

效果：

4.思路：使用css3 flex布局法
优点：简单 快捷
缺点：低端pc浏览器和低版本的安卓设备不支持，不过现在应该很少用了

代码实现：

<style>

.parent4{

    display: flex;

    justify-content: center;

    align-items: center;

    width: 300px;

    height:300px;

    background: red;

}

.parent4 .child{

    color:#fff;

}

</style>

<body>

    <div class="parent4">

        <div class="child">hello world-4</div>

    </div>

</body>

效果：

5.绝对定位法
思路：父元素使用定位（相对/绝对都行），子元素设置position:absolute; top: 0; left: 0; bottom: 0; right: 0; margin:auto;
优点：兼容性好，父元素宽高可变，使用非常灵活，在做全屏居中的时候很好
缺点：子元素还是要指定宽高，可以用百分比

代码实现：

.parent5{

    position:absolute;

    width: 300px;

    height:300px;

    background: red;

}

.parent5 .child{

    color:#fff;

    margin: auto;

    position:absolute;

    top:0;

    left:0;

      right:0;

      bottom:0;

      text-align:center;

      width:50%;

    height:20%;

}

</style>

<body>

    <div class="parent5">

        <div class="child">hello world-5</div>

    </div>

</body>

效果：

三、在追逐性能时代，现在基本都是webkit内核了，拥抱css3弹性布局，个人比较推荐用4、5方法，4.flex布局法适合在局部使用。5.绝对定位法适合在全屏场景使用，比如弹框中。

css实现水平/垂直居中效果的更多相关文章

  1. CSS(3)实现水平垂直居中效果

    CSS实现水平垂直居中对齐 在CSS中实现水平居中,会比较简单.常见的,如果想实现inline元素或者inline-block元素水平居中,可以在其父级块级元素上设置text-align: cente ...

  2. CSS(3)多种方法实现水平垂直居中效果

    CSS实现水平垂直居中对齐 在CSS中实现水平居中,会比较简单.常见的,如果想实现inline元素或者inline-block元素水平居中,可以在其父级块级元素上设置text-align: cente ...

  3. CSS制作水平垂直居中对齐

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...

  4. CSS实现水平垂直居中的1010种方式

    转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...

  5. 你知道CSS实现水平垂直居中的第10种方式吗？

    你知道CSS实现水平垂直居中的第10种方式吗? 仅居中元素定宽高适用: absolute + 负 margin absolute + margin auto absolute + calc 居中元素不 ...

  6. css实现水平 垂直居中

    css实现水平居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. CSS制作水平垂直居中对齐 多种方式各有千秋

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...

  8. css各种水平垂直居中

    css各种水平垂直居中,网上查了一下,总结以下几种 line-height垂直居中 缺点,仅限于单行文字 .item{ text-align: center; height: 100px; line- ...

  9. CSS实现水平垂直居中的数种方法整合

    CSS实现水平垂直居中可以说是前端老生常谈的问题了,一般面试官问的时候面试者都会回答出来,但是继续追问还有没有其他方法的时候有可能就说不出来了. 本着学习知识的目的,特在此纪录CSS实现水平垂直居中的 ...

随机推荐

  1. IT行业怎么了？程序员按时上下班也被开除

    转自:https://blog.csdn.net/keymo_/article/details/7783389 近日看了一条新闻是京东员工按时上下班遭“被离职”.话说一员工入职一个多月以来,每天保质保 ...

  2. 【208】CentOS 下安装 Wine

    参考:centos6.5安装wine 参考:用FreeGate自-由-门软件在Linux上更新Android SDK 参考:CentOS 5.3 使用wine装QQ

  3. 安装Tomcat（windows系统和linux系统）

    Tomcat不管是windows还是Linux版本,都是解压后就再配置一下就可以使用.安装Tomcat前必须先安装JDK,一般我们可以在eclipse中加入Tomcat来开发. 什么是Tomcat? ...

  4. centos安装xen虚拟机并且配置bridge

    主要参考的几个官方文档: http://wiki.centos.org/HowTos/Xen/Xen4QuickStart 在centos上安装xen组件并建立dom0 http://wiki.cen ...

  5. Codeforces Round #422 (Div. 2) C. Hacker, pack your bags!(更新数组)

    传送门 题意 给出n个区间[l,r]及花费\(cost_i\),找两个区间满足 1.区间和为指定值x 2.花费最小 分析 先用vector记录(l,r,cost)和(r,l,cost),按l排序,再设 ...

  6. python __builtins__ complex类 （13）

    13.'complex', 函数用于创建一个值为 real + imag * j 的复数或者转化一个字符串或数为复数.如果第一个参数为字符串,则不需要指定第二个参数. class complex(ob ...

  7. python __builtins__ bytearray类 （7）

    7.'bytearray', 返回一个新字节数组.这个数组里的元素是可变的,并且每个元素的值范围: 0 <= x < 256. class bytearray(object) | byte ...

  8. 更换过Ubuntu之后经常性卡死，原因有待细究

    如题: 卡死时间: 2019-5-22-14:45 再次卡死,这次绝对不是看视频的原因了,具体什么原因还是不知道,不过我觉得就是显卡的问题,和搜索出来的问题差不多,安装了一些东西,看看行不行吧 sud ...

  9. python浅拷贝深拷贝

    copy_list=list[:]  得到的是浅拷贝,即只能顶层拷贝,里面的嵌套不会复制一份. a = [0, [1, 2], 3] b = a[:] a[0] = 8 a[1][1] = 9 请问现 ...

  10. D. Taxes 哥德巴赫猜想

    http://codeforces.com/contest/735/problem/D 这题其实我还不是很懂,那个只是猜想,然而却用了. 只想说说找到第一小于n的素数这种思路是不行的. 121 = 1 ...