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. promise-笔记

    promise 封装Promise var fs = require('fs') function pReadFile(filePath) { return new Promise(function ...

  2. TortoiseGit push免输密码

    (ฅ>ω<*ฅ) 噫又好了~ TortoiseGit push免输密码的方法 – 晨旭的博客~https://www.chenxublog.com/2016/03/04/tortoiseg ...

  3. [转帖]Windows 操作系统有哪些原生的工具和软件不被人了解却很有用？

    Windows 操作系统有哪些原生的工具和软件不被人了解却很有用? 蛋蛋 司马米青E1E1九木 https://www.zhihu.com/question/25343481/answer/30798 ...

  4. C# Note5:使用相对路径读取文件

    一.C#中使用相对路径读取配置文件 一般Solution的目录结构如下图所示: (如过看不到某些文件,可以点击 “显示所有文件” 图标) 方法一:由于生成的exe文件在bin\debug目录下,可以使 ...

  5. java.lang.NoClassDefFoundError: org/apache/log4j/Priority的问题解决

    在pom 文件中添加 <dependency> <groupId>log4j</groupId> <artifactId>log4j</artif ...

  6. Oracle 中sql文件的导入导出

    导出 一般导入的时候我用的是命令行 imp c##zs/@orcl fromuser=c##zs touser=c##zs file=D:\java\.dmp ignore=y c##zs 是创建的用 ...

  7. tomcat优化实例

    ———————————————————————————————————— 一.运行模式优化 修改tomcat运行模式为nio<Connector port="80" prot ...

  8. sql 用户相关命令

    查看所有用户 select distinct concat(user, '@', host,';') as userList from mysql.user; select  #查找 distinct ...

  9. 获取网络图片并显示在picturbox上,byte[]数组转换成Image:

    private void getWebPicture_Click(object sender, EventArgs e) { WebRequest request = WebRequest.Creat ...

  10. HttpWebRequest using Basic authentication

    System.Net.CredentialCache credentialCache = new System.Net.CredentialCache(); credentialCache.Add( ...