CSS居中的几种方式总结

时间：2022-09-06 08:37:51

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>

　　

CSS居中的几种方式总结

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>

　　

CSS居中的几种方式总结

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;

}

　　

CSS居中的几种方式总结

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居中的几种方式总结

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

  1. css居中的几种方式

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

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

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

  3. 前端js&comma;css文件合并三种方式&comma;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系列&lpar;1&rpar; –添加CSS样式的3种方式及样式表的优先权

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

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

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

随机推荐

  1. 一触即发 App启动优化最佳实践

    一触即发 App启动优化最佳实践 本文在 DiyCode 和 CSDN个人博客 同时首发,关注作者的 DiyCode帐号 或者 作者微博 可第一时间收到新文章推送. 文中的很多图都是Google性能优 ...

  2. 漂浮QQ

    漂浮QQ 点击下载

  3. RAID、软RAID和硬RAID

    RAID(redundant array of inexpensive disks):独立的硬盘冗余阵列,基本思想是把多个小硬盘组合在一起成为一个磁盘组,通过软件或硬件的管理达到性能提升或容量增大或增 ...

  4. 笔记本电脑连接wifi有时候会自动断网提示有限的访问权限解决办法

    解决办法如下: [设备管理器],找到[网络适配器]第一项,右键属性

  5. Android之fragment点击切换和滑动切换结合

    学了一小段时间的Android,主要接触的是UI设计,打交道最多莫过于fragment了吧.在Android3.0引入了fragment的概念后,几乎在所以的Android的应用中都可以看见其身影,已 ...

  6. Android获取SIM卡信息--TelephonyManager

    1>获得TelephonyManager  TelephonyManager telMgr = (TelephonyManager) getSystemService(TELEPHONY_SER ...

  7. 各大oj题目分类（转）

    POJ题目分类 | POJ题目分类 | HDU题目分类 | ZOJ题目分类 | SOJ题目分类 | HOJ题目分类 | FOJ题目分类 | 模拟题: POJ1006POJ1008POJ1013POJ1 ...

  8. java中StringUtils中isEmpty 和isBlank的区别

    StringUtils在commons-lang-2.2.jar包中:org.apache.commons.lang.StringUtils ; StringUtils方法的操作对象是java.lan ...

  9. Ubuntu16&period;04安装MySQL

      本篇教程在示例步骤中使用了以下版本的软件.操作时,请您以实际软件版本为准. 操作系统:Ubuntu 16.04.3 LTS (GNU/Linux 4.4.0-105-generic x86_64) ...

  10. Confluence 6 SQL Server 输入你的数据库细节

    Confluence 的安装向导将会指导你一步一步的在 Confluence 中配置安装 SQL Server 数据库. 使用 JDBC 连接(默认) JDBC 是推荐的连接你的 Confluence ...

相关文章