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_迭代器、生成器、列表推导式，生成器表达式

    1.迭代器 (1)可迭代对象 s1 = ' for i in s1: print(i) 可迭代对象 示例结果: D:\Python36\python.exe "E:/Python/课堂视频/ ...

  2. Servlet处理GET和POST请求

    doGet() . doPost().service()方法 doGet()表示,当客户端是使用get方式请求该servlet时,那么就会触发执行doGet()方法中的代码. doPost()表示,当 ...

  3. 【学习总结】GirlsInAI ML-diary day-4：变量/Variable

    [学习总结]GirlsInAI ML-diary 总 原博github链接-day4 变量/Variable 变量是计算机编程中一个很基础的概念,在计算机程序中,variables are reser ...

  4. ~/.bashrc与/etc/profile的区别

    ~/.bashrc:该文件包含专用于某个用户的bash shell的bash信息,当该用户登录时以及每次打开新的shell时,该文件被读取. /etc/profile中设定的变量(全局)的可以作用于任 ...

  5. ShowDoc上手

    ShowDoc是什么 每当接手一个他人开发好的模块或者项目,看着那些没有写注释的代码,我们都无比抓狂.文档呢?!文档呢?!Show me the doc !! 程序员都很希望别人能写技术文档,而自己却 ...

  6. IdentityServer4【Topic】之登出

    Sign-out 登出 IdentityServer的登出就像删除认证cookie一样简单,但是为了完成一个完整的联合签名,我们必须考虑将用户从客户端应用程序中(甚至可能是上游的Identity提供者 ...

  7. cmd远程连接oracle数据库

  8. 50分钟学会Laravel 50个小技巧(基于laravel5.2，仅供参考)

    转载请注明:转载自 Yuansir-web菜鸟 | LAMP学习笔记 本文链接地址: 50分钟学会Laravel 50个小技巧 原文链接:< 50 Laravel Tricks in 50 Mi ...

  9. day 7-7 线程池与进程池

    一. 进程池与线程池 在刚开始学多进程或多线程时,我们迫不及待地基于多进程或多线程实现并发的套接字通信,然而这种实现方式的致命缺陷是:服务的开启的进程数或线程数都会随着并发的客户端数目地增多而增多,这 ...

  10. oninput和onchange的区别

    菜鸟教程: oninput事件:HTML5标准事件 当用户向<input>中尝试输入时执行JavaScript: <input type="text" oninp ...