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

二、
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. Struts2验证框架的配置及validation.xml常用的验证规则

    转自:https://blog.csdn.net/wenwenxiong/article/details/55802655

  2. Aspose.Total 最全的一套office文档管理方案

    百度百科:http://baike.baidu.com/link?url=ymHDlHGW2-6qomYsFneByjeb3OF4JJsHQkyhHFdFlPjcaYR-MT7xFBGttnzdI_W ...

  3. Naïve Bayes Models

    贝叶斯模型假设: 为防止概率为零的情况,做拉普拉斯平滑得: 下面介绍一下朴素贝叶斯模型与多变量伯努利模型的区别: 朴素贝叶斯: 多变量伯努利: 即: 多变量伯努利模型不考虑样本出现的次数,每个特征的取 ...

  4. 最优灌溉_最小生成树Kruskal

    问题描述 雷雷承包了很多片麦田,为了灌溉这些麦田,雷雷在第一个麦田挖了一口很深的水井,所有的麦田都从这口井来引水灌溉. 为了灌溉,雷雷需要建立一些水渠,以连接水井和麦田,雷雷也可以利用部分麦田作为“中 ...

  5. Codeforces - Gym102028 - 2018 Jiaozuo Regional Contest

    http://codeforces.com/gym/102028 A. Xu Xiake in Henan Province 看起来像水题.乱搞一下,还真是. #include<bits/std ...

  6. mfc基于对话框的应用程序,如何设置初始对话框大小,移动控件位置

    void MmPLEntPropertyDlg::SetInitDialogSize() { CRect rectDlg; GetWindowRect(rectDlg);//x,y为对话框左上角的坐标 ...

  7. [官方教程] Unity 5 BLACKSMITH深度分享 - 汇总帖

    BLACKSMITH深度分享系列 相信此大片在Unite上的惊艳亮相,让许多人至今无法忘却它所带来的震撼,Unity的大师们为了让更多Unity开发者了解此大片是如何用Unity5诞生的,深度分享了多 ...

  8. python __builtins__ property类 （55）

    55.'property',  获取对象的所有属性 class property(object) | property(fget=None, fset=None, fdel=None, doc=Non ...

  9. python 字符串函数功能快查

    0.dir(str)一.有字符发生转换1.capitalize,字符串的第一个字符大写2.casefold,将所有字符小写,Unicode所有字符均适用3.lower,将所有字符小写,只适用ASCii ...

  10. Java--------------Mysql中时间按要求查询

    今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 SELECT * FROM 表名 WHERE TO_DAYS( NOW( ) ...