位置: 编程技术 - 正文

讨论CSS中的各类居中方式(列举css的三种应用方式)

编辑:rootadmin

推荐整理分享讨论CSS中的各类居中方式(列举css的三种应用方式),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css有几种使用方法,列举css的三种应用方式,css简述,讨论css中的各类问题,讨论css中的各类文件,讨论css中的各类元素,讨论css中的各类问题,讨论css中的各类元素,内容如对您有帮助,希望把文章链接给更多的朋友!

今天主要谈一谈CSS中的各种居中的办法。 首先是水平居中,最简单的办法当然就是

也就是将margin-left和margin-right属性设置为auto,从而达到水平居中的效果。

那么其他的办法呢?容我一一道来:

line-height

首先介绍文字的水平居中方法:

利用line-height设为height的一样即可:

效果如下:

Notice: Undefined index: CMSdown in /data/webroot/gcms/lib/Api/Open/Article.php on line img////_dfad.png" alt="查看图片" />

padding填充

利用padding和background-clip配合实现div的水平垂直居中:

通过backgroun-clip设置为content-box,将背景裁剪到内容区外沿,再利用padding设为外div减去内div的差的一半,来实现:

效果如下:

Notice: Undefined index: CMSdown in /data/webroot/gcms/lib/Api/Open/Article.php on line img////_dfab5da.png" alt="查看图片" />

margin填充

接下来介绍margin填充的方式来实现水平垂直居中。 首先我们还是定义父子div:

<div class="parent"> <div class="children"></div></div>

这里我们利用将子div的margin-top设置为父div高度减去子div高度的一半,然后再通过overflow设置为hidden来触发父div的BFC,LESS代码如下:

最后得到居中效果如下:

Notice: Undefined index: CMSdown in /data/webroot/gcms/lib/Api/Open/Article.php on line img////_dfe.png" alt="查看图片" />

absolute定位

讨论CSS中的各类居中方式(列举css的三种应用方式)

利用position:absolute搭配top,left %,再将margin设为负值也可以对div进行水平垂直居中,首先还是需要定义父子div:

然后设置相应的css:

其中的margin中的值为该div宽度的一半,最后效果图:

Notice: Undefined index: CMSdown in /data/webroot/gcms/lib/Api/Open/Article.php on line img////_dfad.png" alt="查看图片" />

text-align居中

众所周知,text-align可以使得一个div中的内容水平居中。但是如果是要将该div中的子div居中呢?可以将子div的display设为inline-block。

图片居中

一般的图片居中都是和text-align一样,将图片包装在一个div中,将该div的text-align设为center即可。 可以参考下面的链接: 个人站点

有一种特殊的方式,利用了一个图片进行占位,以让父容器获得高宽,从而让进行-%偏移的图片能有一个参照容器作百分比计算。优点是可以不知道图片的大小,随便放张尺寸不超过父容器的图片上去都能做到居中。另外,兼容性好,IE6都是能顺利兼容的。代码如下:

效果如下:

Notice: Undefined index: CMSdown in /data/webroot/gcms/lib/Api/Open/Article.php on line img////_dfc2.png" alt="查看图片" />

transform居中

上面讲到的div居中的例子中,div的宽度都是固定的,然而实际项目中,有可能遇到不定宽的div,特别是响应式或者移动端的设计中,更加常见。所以下面介绍一种不需要定宽的div水平垂直居中方法。 先上代码:

效果如下:

Notice: Undefined index: CMSdown in /data/webroot/gcms/lib/Api/Open/Article.php on line img////_dfc3ed3.png" alt="查看图片" />

首先我们利用float,将需要居中的div的父div也就是children的宽度收缩,然后left:%,将children的左边与水平中线对齐。这个时候,还没有真正居中,我们需要将children-inner左移动-%,这样就水平居中了。 再来说说垂直方向,先将children的top设为%,然后其上边和垂直中线对齐了,同样,我们需要将children-inner上移动-%。但是这个%是计算不出来的,所以我们用到了transform : translate3d(0, -%, 0); 这个方法非常好用噢。

flex居中

最后来介绍一下CSS3中的display:flex来实现的水平垂直居中的方法。

效果如下:

Notice: Undefined index: CMSdown in /data/webroot/gcms/lib/Api/Open/Article.php on line img////_dfc.png" alt="查看图片" />

这种方式最为简便,就是兼容性不好,不过随着时间的前进,各大浏览器一定会都兼容的。

标签: 列举css的三种应用方式

本文链接地址:https://www.jiuchutong.com/biancheng/368728.html 转载请保留说明!

上一篇:前端获取http状态码400的返回值实例

下一篇:如何使用CSS3画出一个叮当猫(css怎么画)

  • 车辆保险费发票的会计分录
  • 办房产证的完税证明是什么
  • 增值税专用发票和普通发票的区别
  • 企业所得税季度预缴怎么计算
  • 纳税人等级怎么划分
  • 小规模纳税人金融服务税率
  • 资产总额季度平均
  • 外商企业所得税可享受什么优惠政策
  • 福利费专票不抵税可以吗
  • 企业所得税到底是25%还是5%
  • 一般纳税人认定书
  • 收到免税发票会影响税负吗
  • 电子公章盖上去怎么文字看不到了
  • 应收账款减值准备和坏账准备的区别
  • 医院医保统筹支付后还能报销吗
  • 二手车抵押银行贷款
  • 借款本金和借款余额
  • 长期待摊费用提前清理
  • 社保已申报但未缴费有什么影响
  • 企业销售使用过的汽车如何开票
  • 固定资产核销怎么做
  • 利息支出怎么结转
  • 抵押房屋可以出卖吗
  • 捐赠视同销售为什么不确认收入?
  • php curl header参数
  • 销售人员奖励办法
  • 赠送客户的商品怎么入账
  • 土地增值税清算管理规程
  • 高新技术企业研发费用归集
  • 进程mmc.exe
  • 【已解决】VUE3+webpack >5报错问题
  • php并发编程
  • 自行建造厂房如何缴税
  • php比较大小
  • 计算机视觉算法
  • 股东出资证明书范本
  • 企业所得税退税如何进行账务处理
  • 差旅费补贴要交个人所得税文件
  • 年收入1500万是富人吗
  • 只开发票没有合同也要印花税吗
  • 三险一金的专项扣除标准
  • sqlserver监视器
  • 视同销售的情况是?
  • 支付招标代理费的请示
  • 物业公司收的停车费做什么科目
  • 还借款收据怎么写
  • 对外担保的效力
  • 股权转让如何计算股权原值
  • 租赁公司账务科目
  • 融资租入固定资产的账务处理
  • 中药饮片盘点损耗率 法律
  • 水果销售公司怎么起名字好听
  • 工资油补也要交税吗
  • mysql exists与not exists实例详解
  • VMware虚拟机中安装MATE桌面环境
  • ssh命令行登录服务器
  • 安装windows7所需的条件
  • ps到底怎么用
  • 如何设置windows桌面图标
  • win7使用率
  • 怎么清空windows8电脑里全部东西
  • win10怎么查看磁盘是固态还是机械
  • 放大镜windows快捷键
  • linux常用桌面环境
  • python 安装setup
  • 语音单词怎么读
  • vue组件互相嵌套
  • jq获取url
  • 服务器安全设备
  • vue左侧菜单栏实现
  • listview提高效率
  • 举例说明json数据格式的语法
  • 常见的java数据类型有哪些
  • python 观察者
  • 对超市的建议和意见怎么写简短
  • 地税的发票是什么样
  • 国家税务总局2018年61号公告
  • 航空煤油消费税征收环节
  • 税务培训主题
  • 实收资本印花税税率多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设