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. JS_左边栏菜单

    需求: 要求实现左边栏菜单点击一下就弹开,其他的隐藏.再点击一下就隐藏. 最多只能有一个菜单的详细内容会显示出来. 三个菜单实现联动效果. 代码如下: 1 <!DOCTYPE html> ...

  2. org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.bw.mapper.BillMapper.getBillList at org.apache.ibatis.binding.MapperMethod$SqlCommand.<init>(MapperMethod.java:225

    这个错误是没有找到映射文件 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.b ...

  3. mysql问题汇总——持续更新

    1.this is incompatible with sql_mode=only_full_group_by set @@sql_mode='STRICT_TRANS_TABLES,NO_ZERO_ ...

  4. Laravel 门面实例教程 —— 创建自定义 Facades 类

    我们首先创建一个需要绑定到服务容器的Test类: <?php namespace App\Facades; class Test { public function doSomething() ...

  5. 1 CHM 中文都是乱码

    CHM格式是Windows系统里常见的帮助文档格式,但有时一些CHM格式的文档会局部显示乱码,特别是一些外文文档在中文版Windows里.这是因为,CHM格式文档在Windows下默认是使用IE浏览器 ...

  6. 【学亮IT手记】jQuery each()函数用法实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  7. checkout 多选 全选（亲测有效）

    <input type="button" id="btn1" value="全选"> <input type=" ...

  8. JSON Support in PostgreSQL and Entity Framework

    JSON 和JSONB的区别(What's difference between JSON and JSONB data type in PosgresSQL?) When should be use ...

  9. flutter图片铺满父框

    正常我们需要显示一张图片,会用到Image这个控件. 打个比方,我们加载一张本地的图片, 先看一下这个Image.asset的源码: Image.asset(String name, { Key ke ...

  10. Codeforces 1154F Shovels Shop

    题目链接:http://codeforces.com/problemset/problem/1154/F 题目大意: 商店有n把铲子,欲购k把,现有m种优惠,每种优惠可使用多次,每种优惠(x, y)表 ...