1.水平居中的 margin:0 auto;

这个是用于子元素上的，前提是不受float影响

<style type="text/css">

.box{

	width: 300px;

	height: 300px;

	border: 3px solid red;

	/*text-align: center;*/

}

img{

	display: block;

	width: 100px;

	height: 100px;

	margin: 0 auto;

}

</style>

<body>

  <div class="box">

        <img src="detail-share.png" alt="">

  </div>

</body>

　　

2.水平居中 text-align:center;

代码实例如上

3.水平垂直居中（一）定位和需要定位的元素的margin减去宽高的一半

<style type="text/css">

   .box{

        width: 300px;

        height: 300px;

        background:#e9dfc7;

        border:1px solid red;

        position: relative;

    }

    img{

        width: 100px;

        height: 120px;

        position: absolute;

        top: 50%;

        left: 50%;

        margin-top: -60px;

        margin-left: -50px;

    }

</style>

<div class="box">

   <img src="detail-share.png" alt="">

</div>

　　

4.水平垂直居中（二）定位和margin:auto;

这个方法也很实用，不用受到宽高的限制,也很好用

.box{

  position: relative;

  width: 300px;

  height: 300px;

  background:#e9dfc7;

  border:1px solid red;

}

img{

  width: 100px;

  height: 100px;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  margin: auto;

}

　　

5.水平垂直居中（三）绝对定位和transfrom

这个方法比较高级了，用到了形变，据我所知很多大神喜欢使用这个方法进行定位，逼格很高的，学会后面试一定要用！这个是不需要知道居中元素的宽高就可以使用的，代码里的图片稍微有点大，改改宽高，仅此而已，在面试中大部分人会问如果不知道宽高该如何居中，答这个，加分！

.box{

  width: 300px;

  height: 300px;

  background:#e9dfc7;

  border:1px solid red;

  position: relative;

}

img{

  width: 100px;

  height: 100px;

  position: absolute;

  top: 50%;

  left: 50%;

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

}

　　

6.水平垂直居中（四）diplay：table-cell

其实这个就是把其变成表格样式，再利用表格的样式来进行居中，很方便

.box{

  width: 300px;

  height: 300px;

  background:#e9dfc7;

  border:1px solid red;

  display: table-cell;

  vertical-align: middle;

  text-align: center;

}

img{

  width: 100px;

  height: 100px;

  /*margin: 0 auto;*/  这个也行

}

　　

7.水平垂直居中（五）flexBox居中

这个用了CSS3新特性flex,非常方便快捷，在移动端使用完美，pc端有兼容性问题，以后会成为主流的

.box{

  width: 300px;

  height: 300px;

  background:#e9dfc7;

  border:1px solid red;

  display: flex;

  justify-content: center;

  align-items:center;

}

img{

  width: 100px;

  height: 100px;

}

　　

8.水平垂直居中（六）利用vertical-align:middle;

这方法不常见，但是这位朋友@不二很纯洁 补充后我觉得也不失为一种好方法可以让别人刮目相看，这个方法关键要有一个和容器一样高的元素作为居中的一个参照就像b元素一样

<style type="text/css">

    .wrap{

        width:300px;

        height:300px;

        background:rgba(0,0,0,0.5);

        text-align:center;

        font-size:0;

    }

    .vamb{

        display:inline-block;

        width:0px;

        height:100%;

        vertical-align:middle;

    }

    .test{

        display:inline-block;

        vertical-align:middle;

        font-size:16px;

        text-align:left;

        background:red;

    }

</style>

<div class="wrap">

  <b class="vamb"></b>

  <div class="test">

    宽高不定<br>

    垂直水平居中

  </div>

</div>

　　

CSS居中的几种方式总结的更多相关文章

  1. css居中的几种方式

    居中分水平和垂直两种,使用的频度也算是很高,下面分情况来讨论一下几种常用的实现方式. 欢迎指正文中的错误,同时如果有学习到新的方式也会更新在后面,也方便以后温故知新. 1.margin 这种方式只能实 ...

  2. 前端基础问题：CSS居中的几种方式

    水平居中 (1)内联元素: text-align: center; 利用 text-align: center :可以实现在块级元素内部的内联元素水平居中. 如果一行中有多个块级元素,可以通过设置块级 ...

  3. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  4. HTML 引用Css样式的四种方式

    不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...

  5. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  6. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  7. 【javascript】原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  8. 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权

    如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...

  9. HTML与CSS结合的四种方式

    HTML与CSS结合的四种方式: 方式一:每个标签加一个属性: 例如:<div style="background-color:red; color: green"> ...

随机推荐

  1. Python_程序实现发红包

    发红包 200块钱  20个红包 将200块随机分成20份 基础版本: import random ret = random.sample(range(1, 200 * 100), 19) ret = ...

  2. SQLSERVER sa 用户密码修改的方法

    本次驱动人生病毒的收获 . 偷懒总会有报应. . 应用(数据库或者是web应用nginx等.)都不要使用最高级别权限用户来使用 虽然这样的环境问题最少. . 密码还是需要定期更换的,虽然有成本,但是也 ...

  3. [转帖]oracle改版sql server问题点汇总

    https://www.cnblogs.com/zhangdk/p/oracle_sqlserver.html 只记得 最开始的时候看过 没有具体的了解里面的特点 原作者总结的很好 留下来 以后说不定 ...

  4. spring AOP源码分析（三）

    在上一篇文章 spring AOP源码分析(二)中,我们已经知道如何生成一个代理对象了,那么当代理对象调用代理方法时,增强行为也就是拦截器是如何发挥作用的呢?接下来我们将介绍JDK动态代理和cglib ...

  5. Day 4-3 os & sys模块

    常用方法: import os os.getcwd() # 获取当前程序的工作路径(python解释器的运行路径,不是脚本所在的路径.) os.listdir() # 获取当前程序根目录下的所有文件夹 ...

  6. rpm和yum

    RMP(红帽软件包管理器) RPM有点像Windows系统中的控制面板,会建立统一的数据库文件,详细记录软件信息并能够自动分析依赖关系. YUM(软件仓库)

  7. linux 查看TCP端口

    如有转载,不胜荣幸.http://www.cnblogs.com/aaron-agu/ netstat –nat

  8. Lodop打印控件指定打印任务某几页

    使用Lodop打印控件进行打印开发,有时候一个任务里有多页,例如各种合同之类的,客户端用户在使用过程中,可能有某一页打印后发现需要修改,这时候不必再把整个任务重新打印一遍,只需要打印需要修改的那页重新 ...

  9. MongoDB学习目录

    前面的话 为了能够使用NodeJS实现后端,MongoDB——这个NodeJS标配的数据库就不得不学.小火柴将MongoDB数据库的学习记录整理如下 基础 基础操作 数据类型 文档操作 索引 索引构建 ...

  10. How the Microsoft Bot Framework Changed Where My Friends and I Eat: Part 1

    Bots are everywhere nowadays, and we interact with them all of the time. From interactions on our ph ...