当前位置: 首页 > news >正文

CSS居中的方法总结

【水平居中】

行内:text-align:center;

定宽块状:1.left:0 right:0然后用margin: auto外边距填充,水平方向不会发生外边距叠加;  2.绝对定位(父元素定位不能是普通流)

不定宽块状:

1.<table> <tbody><tr><td>,然后table即是定宽块状元素

2.display:inline-block 然后当做行内元素处理,可以实现居中且保留块元素特性,如设置宽高。

 

【垂直居中(假设父元素高度不定)】

定位选择:普通流、float不能在垂直方向被定位,故只考虑absolute和relative,但relative定位没有脱离文档流,会造成顶底与父元素的margin合并。因此一般非文本元素的垂直居中都用absolute定位。

居中思路有两种:

一、先将待定位元素坐标定位到相应位置,再配合负边距调整(需要用到自身高度,或用CSS3的transform:translateY(-50%));

二、利用自动填充来“撑”到居中,这一思路的做法包括margin(父元素不能为普通流定位,否则不以父元素为坐标基准)和line-height(文本元素)。

转载于:https://www.cnblogs.com/leegent/p/5232352.html

相关文章:

  • docker安装caffe
  • leveldb性能分析
  • postgresql利用pg_upgrade升级数据库(从8.4升级到9.5)
  • 吸血鬼数字
  • DropdownList
  • Linq 内联左联等
  • 初探博客园
  • ActiveMQ消息的可靠性机制(转)
  • 啦啦啦~
  • select 相关
  • JSP具体篇——out
  • 20145109《Java程序设计》第二周学习总结
  • Mac OS X下高速拷贝文件路径
  • Material Design之TextInputLayout使用示例
  • redis配置详情
  • 2017前端实习生面试总结
  • const let
  • Python - 闭包Closure
  • SQLServer之索引简介
  • uva 10370 Above Average
  • 阿里中间件开源组件:Sentinel 0.2.0正式发布
  • 从零开始学习部署
  • 二维平面内的碰撞检测【一】
  • 猫头鹰的深夜翻译:JDK9 NotNullOrElse方法
  • 设计模式(12)迭代器模式(讲解+应用)
  • 深度学习入门:10门免费线上课程推荐
  • 优化 Vue 项目编译文件大小
  • 在weex里面使用chart图表
  • 7行Python代码的人脸识别
  • (9)STL算法之逆转旋转
  • (C语言)输入自定义个数的整数,打印出最大值和最小值
  • (二)WCF的Binding模型
  • (附源码)spring boot智能服药提醒app 毕业设计 102151
  • (附源码)springboot电竞专题网站 毕业设计 641314
  • (附源码)计算机毕业设计SSM智能化管理的仓库管理
  • (转)jQuery 基础
  • (转)Oracle 9i 数据库设计指引全集(1)
  • (转)Oracle存储过程编写经验和优化措施
  • .java 9 找不到符号_java找不到符号
  • .net Signalr 使用笔记
  • .net 设置默认首页
  • .NET上SQLite的连接
  • @reference注解_Dubbo配置参考手册之dubbo:reference
  • [<MySQL优化总结>]
  • [20161101]rman备份与数据文件变化7.txt
  • [ABC294Ex] K-Coloring
  • [android] 练习PopupWindow实现对话框
  • [C# 基础知识系列]专题十六:Linq介绍
  • [GXYCTF2019]BabyUpload1 -- 题目分析与详解
  • [HTML API]HTMLCollection
  • [ICCV2017]Neural Person Search Machines
  • [IE编程] 如何编程清除IE缓存
  • [Linux] 一文理解HTTPS协议:什么是HTTPS协议、HTTPS协议如何加密数据、什么是CA证书(数字证书)...
  • [Lucas定理]【学习笔记】
  • [NOIP2004] 提高组 洛谷P1090 合并果子