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

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

  1. <style type="text/css">
  2. .box{
  3. 	width: 300px;
  4. 	height: 300px;
  5. 	border: 3px solid red;
  6. 	/*text-align: center;*/
  7. }
  8. img{
  9. 	display: block;
  10. 	width: 100px;
  11. 	height: 100px;
  12. 	margin: 0 auto;
  13. }
  14. </style>
  15. <body>
  16.   <div class="box">
  17.         <img src="detail-share.png" alt="">
  18.   </div>
  19. </body>

　　

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

代码实例如上

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

  1. <style type="text/css">
  2.    .box{
  3.         width: 300px;
  4.         height: 300px;
  5.         background:#e9dfc7;
  6.         border:1px solid red;
  7.         position: relative;
  8.     }
  9.     img{
  10.         width: 100px;
  11.         height: 120px;
  12.         position: absolute;
  13.         top: 50%;
  14.         left: 50%;
  15.         margin-top: -60px;
  16.         margin-left: -50px;
  17.     }
  18. </style>
  19. <div class="box">
  20.    <img src="detail-share.png" alt="">
  21. </div>

　　

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

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

  1. .box{
  2.   position: relative;
  3.   width: 300px;
  4.   height: 300px;
  5.   background:#e9dfc7;
  6.   border:1px solid red;
  7. }
  8. img{
  9.   width: 100px;
  10.   height: 100px;
  11.   position: absolute;
  12.   top: 0;
  13.   left: 0;
  14.   right: 0;
  15.   bottom: 0;
  16.   margin: auto;
  17. }

　　

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

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

  1. .box{
  2.   width: 300px;
  3.   height: 300px;
  4.   background:#e9dfc7;
  5.   border:1px solid red;
  6.   position: relative;
  7. }
  8. img{
  9.   width: 100px;
  10.   height: 100px;
  11.   position: absolute;
  12.   top: 50%;
  13.   left: 50%;
  14.   transform: translate(-50%,-50%);
  15. }

　　

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

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

  1. .box{
  2.   width: 300px;
  3.   height: 300px;
  4.   background:#e9dfc7;
  5.   border:1px solid red;
  6.   display: table-cell;
  7.   vertical-align: middle;
  8.   text-align: center;
  9. }
  10. img{
  11.   width: 100px;
  12.   height: 100px;
  13.   /*margin: 0 auto;*/  这个也行
  14. }

　　

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

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

  1. .box{
  2.   width: 300px;
  3.   height: 300px;
  4.   background:#e9dfc7;
  5.   border:1px solid red;
  6.   display: flex;
  7.   justify-content: center;
  8.   align-items:center;
  9. }
  10. img{
  11.   width: 100px;
  12.   height: 100px;
  13. }

　　

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

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

  1. <style type="text/css">
  2.     .wrap{
  3.         width:300px;
  4.         height:300px;
  5.         background:rgba(0,0,0,0.5);
  6.         text-align:center;
  7.         font-size:0;
  8.     }
  9.     .vamb{
  10.         display:inline-block;
  11.         width:0px;
  12.         height:100%;
  13.         vertical-align:middle;
  14.     }
  15.     .test{
  16.         display:inline-block;
  17.         vertical-align:middle;
  18.         font-size:16px;
  19.         text-align:left;
  20.         background:red;
  21.     }
  22. </style>
  23. <div class="wrap">
  24.   <b class="vamb"></b>
  25.   <div class="test">
  26.     宽高不定<br>
  27.     垂直水平居中
  28.   </div>
  29. </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. 如何在 Linux 中查找最大的 10 个文件

    https://linux.cn/article-9495-1.html

  2. docker技术之基本命令

    我们使用基本命令之前,先来普及一下操作中使用的基本概念 镜像   image 容器   container 仓库   repository 镜像 Docker 镜像是一个特殊的文件系统,除了提供容器运 ...

  3. JS中的<a>标签

    <a>标签可定义锚.一个锚有两种用法: 通过使用 href 属性,创建一个到另外一个文档的链接 通过使用 name 或 id 属性,创建一个文档内部的书签 如果是在 HTML 5 中,它定 ...

  4. java的强制类型转换

    java强制类型转换  详细连接https://www.cnblogs.com/kuangwong/p/6198862.html 在Java项目的实际开发和应用中,常常需要用到将对象转为String这 ...

  5. Django--CRM

    一 . 什么是CRM CRM就是客户关系管理系统(customer relationship management) 二 . 用户登录 # models.py文件 class UserProfile( ...

  6. sed 双引号 单引号的区别

    a="abcd" b="abc" sed -i '/$a/ s/$/$b/' test.a 我想在test.a中匹配以”abcd“开头的行,然后在行尾加入”ab ...

  7. comparable和comparator

    Comparable Comparable可以认为是一个内部比较器,实现了Comparable接口的类有一个特点,就是这些类是可以和自己比较的,在compareTo方法中指定具体的比较方法. comp ...

  8. Tomcat配置Https环境

    windows环境下:http://blog.csdn.net/supersky07/article/details/7407523 linux环境下:http://blog.csdn.net/cuk ...

  9. ES 6 系列 - Proxy

    Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以是一种“元编程”,即对编程语言进行编程. 简单地理解,就是在目标对象之前假设一层“拦截”,外界对改对象的访问,都必须先通过这层拦截 ...

  10. WPF TextBox控件中文字实现垂直居中

    TextBox纵向长度比较长但文字字体比较小的时候,在输入时就会发现文字不是垂直居中的. 而使用中我们发现,TextBox虽然可以设置文字的水平对齐方式,但却没有相应的属性让我们来调节他的垂直对齐方式 ...