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

二、
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. Where Amazing Happens

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submission( ...

  2. 任务48：Identity MVC：Model后端验证

    任务48:Identity MVC:Model后端验证 RegisterViewModel using System; using System.Collections.Generic; using ...

  3. JAVA基础--异常10

    一.Object类简介 1.Object类简介 Object,是Java一切对象的最高父类:如果一个类没有显示继承一个类,他的父类就是Object: 它描述的是Java世界里所有对象最最共性的信息,它 ...

  4. K

    https://codeforces.com/gym/101982/attachments K 打表暴力 /*#include<bits/stdc++.h> using namespace ...

  5. 如何使用webstorm去操作git

    0. 前言 在上一篇文章中,讲述了使用webstorm去调试node程序,最近研究了一下如何使用webstorm去操作git. 对于git的使用,大家的使用方式均有不同,最王道的方式非命令行莫属,基于 ...

  6. Luogu P4889 kls与flag 【思维/排序】By cellur925

    题目传送门 这题真的一点也不难qwq.只要想出来就没有什么代码难度的qwq. 每个竹竿只可能向左倒或向右倒,把这两种情况都存在数组中,将数组排序,就可以知道最后落在同一位置的有多少竹竿.就可以知道落在 ...

  7. Centos 6.8 配置Lvs

    LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统.本项目在1998年5月由章文嵩博士成立,是中国国内最早出现的自由软件项目之一. 宗旨: 使 ...

  8. win32 寄存器

    跳转指令分三类: 一.无条件跳转: JMP ;无条件跳转 二.根据CX.ECX寄存器的值跳转: JCXZ ;CX 为 0 则跳转 JECXZ;ECX 为 0 则跳转 三.根据EFLAGS寄存器的PSW ...

  9. 那些坑爹的python面试题

    python基础知识思维导图 MyProcessOn Python基础: 说说你眼中的python( 2 ) 谈谈你对python和其他语言的区别 1. python 中,变量是以内容为基准而不是像 ...

  10. 单机版solr6.3和分布式solr6.3的安装部署

    一.单机版的solr部署 我的是在windows下安装的,linux同理 1. 安装JDK8,并配置好环境变量,一般我们经常开发的电脑上应该都有JDk了,所以这一步可以忽略. 2. 解压solr6.3 ...