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

二、
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. mfc实现对话框全屏置顶显示

    一.MFC让对话框窗口始终在最前 方法一:在对话框的属性中,把SystemModal设置为True. 二.全屏显示 在CDialog7::OnInitDialog()中加入: 先取得分辨率, int ...

  2. Python 赋值、浅拷贝和深拷贝

    初学Python,和C++还是有许多不同.直接赋值.浅拷贝和深拷贝,这三种拷贝对象的操作之间还是有许多的区别.Python语言的版本为2.7,在Pycharm中进行实验. 一.直接赋值 用下面的代码来 ...

  3. Mac系统下源码编译安装MySQL 5.7.17

    1.下载并解压到:/Users/xiechunping/Softwares/mysql-5.7.17下载地址:http://ftp.ntu.edu.tw/pub/MySQL/Downloads/MyS ...

  4. 洛谷 - P2055 - 假期的宿舍 - 最大流

    https://www.luogu.org/problemnew/show/P2055 这是一个错误的示范. 一开始觉得就找一条路从外校同学连到本校同学然后最终从周末回家的同学流出,每个人睡后一个人的 ...

  5. 重装 Cloudera CDH 5，启动oozie 出错处理

    参考文章:http://community.cloudera.com/t5/Cloudera-Manager-Installation/Error-CDH5-oozie/td-p/8686 按照文章说 ...

  6. Fiddler 学习

    Little Skill Fiddler 官网: https://www.telerik.com/fiddler 来自 https://www.cnblogs.com/zhaoyanjun/p/706 ...

  7. Luogu P2278 [HNOI2003]操作系统【优先队列/重载运算符/模拟】 By cellur925

    题目传送门 本来是照着二叉堆的题去做的...没想到捡了个模拟...不过模拟我都不会...我好弱啊... 其实核心代码并不长,比辰哥的标程短到不知哪里去...但是思路需要清晰. 读题的时候我明白,当有优 ...

  8. CSS常见的五大布局

    本文概要 本文将介绍如下几种常见的布局: 一.单列布局 常见的单列布局有两种: header,content 和 footer 等宽的单列布局 header 与 footer 等宽,content 略 ...

  9. bzoj 4860 [BeiJing2017]树的难题

    题面 https://www.lydsy.com/JudgeOnline/problem.php?id=4860 题解 点分治 设当前重心为v 假设已经把所有边按照出发点第一关键字, 颜色第二关键字排 ...

  10. AtCoder Regular Contest 074 F - Lotus Leaves

    题目传送门:https://arc074.contest.atcoder.jp/tasks/arc074_d 题目大意: 给定一个\(H×W\)的网格图,o是可以踩踏的点,.是不可踩踏的点. 现有一人 ...