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

主流的CSS水平和垂直居中技术大全

原文地址: https://www.xksblog.top/CSS-mainstream-centering-techniques.html

几个月也零零散散学了不少CSS居中技术,每到用的时候,发现总是稀里糊涂的,有时不知道该选用哪种技术,有时候又常常把方法搞混,索性好好整理一下,以后查阅回顾也更方便。这里只简单总结了大部分主流的居中方法,如果有发现更加牛皮好用的,会不断的更新进来。

水平居中

行内元素的水平居中

  1. text-align:center(在父元素中设置)
  • 只对内联元素或行内块元素有效
  • 需要放置于父元素中

块级元素的水平居中

  1. margin: 0 auto;
  • 只对块级元素有效
  • auto指的是自适应宽度。实质就是均分了元素左右的剩余空间,所以元素会居中。
  • auto只有在块级元素设置了宽度width才有效(块级元素不设宽度默认就占整行了,所以是废话)
  • auto无法实现块级元素的垂直居中,原因与CSS默认的高度计算规则有关,这里暂不深究。但margin:auto可以实现绝对定位元素水平垂直居中,见下文。
  • 参考:为什么margin为auto不能垂直居中?、为什么「margin:auto」可以让块级元素水平居中?、张鑫旭——margin:auto实现绝对定位元素的居中及原理

垂直居中

行内元素的垂直居中

  1. line-height: 父元素的高度;(在父元素中设置)
  • 只对内联元素或行内块元素有效
  • 需要知道父元素的高度
  • 需要放置于父元素中
  • 适用于垂直方向上只有一个需要居中的元素的情况(想同时垂直居中多个元素时,可以用padding)
  1. vertical-align: middle;(用于垂直对齐inline元素)
  • 只对内联元素或行内块元素有效
  • 主要用在文本和与文本相邻元素的垂直方向上的对齐问题(主要是对齐的作用,而不是居中的作用),

例如将一个icon与文字对齐。

  • 使用vertical-align需要了解文字的baseline和line-box等知识,可参考:[[翻译]关于Vertical-Align你需要知道的事情](https://segmentfault.com/a/11...、我对CSS vertical-align的一些理解与认识(一)

水平垂直居中

浮动元素

  1. 使用position:relative;

具体方法与绝对定位的第1个和第2个方法类似,只不过把absolute改为relative,并根据原float的方向稍作修改即可。

  • 相对定位relative可以和float叠加,在float后的位置上再相对定位。
  • 缺点就是float元素居中后仍会占据原来的位置。
  • 第二种方式中,如果设定了浮动元素的高度,将会影响transform的具体值。

绝对定位元素

  1. 使用50%推进法则

    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -该元素自身宽度的一半px;      /*水平居中*/
    margin-top: -该元素自身高度的一半px;      /*垂直居中*/
  • 只对绝对定位的元素有效
  • 需要知道绝对定位元素的宽高
  • 兼容性很好,是一种主流用法
  1. 第一种方法的改进版,使用transform代替margin

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);  /*水平垂直居中*/
  • 不需要知道绝对定位元素的宽高。(如果设置了高度,则有可能影响到transform的具体值)
  • 兼容性一般,IE10+以及其他现代浏览器支持
  1. 使用margin:auto;

    position: absolute;
    left: 0;
    right: 0;           /*水平居中*/
    top: 0;
    bottom: 0;          /*垂直居中*/
    margin: auto;
  • 只对绝对定位的元素有效
  • 不必知道宽高,但需要是图片这种自身包含尺寸的元素
  • left与right必须配对出现,top与bottom必须配对出现
  • 目前支持IE9+,及其他浏览器。
  • 参考:张鑫旭——margin:auto实现绝对定位元素的居中及原理

flex居中方式

display: flex;
justify-content: center;  /*水平居中*/
align-items: center;      /*垂直居中*/
  • 块级元素设置display: flex;,内联元素设置display: inline-flex;

需要注意的几个问题

  1. 元素浮动后仍可以设置margin属性,但auto不会起作用。
  2. 图片居中的问题
  • 注意:如果图片的宽度大于父元素的宽度, 不能使用margin: 0 auto;或者text-align: center;让图片居中
  • 如果图片的宽度大于父元素的宽度, 可以绝对定位中的居中方式让图片居中。但是定位流的弊端也比较明显。它必须知道图片宽度。
  • 如果图片的宽度大于父元素的宽度, 也可以使用margin: 0 -100%;

(注意: 父元素必须设置text-align: center;

相关文章:

  • 简单工厂、工厂方法和抽象工厂
  • SQLite 多线程模型实测分析
  • 小白都能玩的算法day3-计算机的变革
  • Easyui入门视频教程 第04集---Easyui布局
  • git的安装
  • Visual Studio ALM 词汇表
  • mysql判断两个逗号分隔字符串是否有交集
  • 2018 KDD CUP支付宝安全团队Deep X斩获两项大奖
  • JConsole connection failed
  • tarjan进阶
  • ubuntu13启动屏幕亮度0解决方法
  • 数据结构与抽象 Java语言描述 第4版 pdf (内含标签)
  • 文件尾存在EOF吗?
  • shell使用lftp连接ftp和sftp,并可以指定私钥
  • JMeter中的读取json数据---JSON Extractor插件
  • Android单元测试 - 几个重要问题
  • css的样式优先级
  • Javascript编码规范
  • js继承的实现方法
  • python_bomb----数据类型总结
  • react 代码优化(一) ——事件处理
  • Spring思维导图,让Spring不再难懂(mvc篇)
  • - 概述 - 《设计模式(极简c++版)》
  • 视频flv转mp4最快的几种方法(就是不用格式工厂)
  • 数据可视化之 Sankey 桑基图的实现
  • 做一名精致的JavaScripter 01:JavaScript简介
  • linux 淘宝开源监控工具tsar
  • 曜石科技宣布获得千万级天使轮投资,全方面布局电竞产业链 ...
  • ​2020 年大前端技术趋势解读
  • (3)选择元素——(14)接触DOM元素(Accessing DOM elements)
  • (env: Windows,mp,1.06.2308310; lib: 3.2.4) uniapp微信小程序
  • (HAL)STM32F103C6T8——软件模拟I2C驱动0.96寸OLED屏幕
  • (读书笔记)Javascript高级程序设计---ECMAScript基础
  • (分享)自己整理的一些简单awk实用语句
  • (三十五)大数据实战——Superset可视化平台搭建
  • (五)c52学习之旅-静态数码管
  • (译) 函数式 JS #1:简介
  • ./configure,make,make install的作用(转)
  • .NET MVC 验证码
  • .Net 垃圾回收机制原理(二)
  • .NET/C# 如何获取当前进程的 CPU 和内存占用?如何获取全局 CPU 和内存占用?
  • .Net面试题4
  • .NET中的Event与Delegates,从Publisher到Subscriber的衔接!
  • .pings勒索病毒的威胁:如何应对.pings勒索病毒的突袭?
  • [ C++ ] STL---仿函数与priority_queue
  • [1127]图形打印 sdutOJ
  • [2009][note]构成理想导体超材料的有源THz欺骗表面等离子激元开关——
  • [3D游戏开发实践] Cocos Cyberpunk 源码解读-高中低端机性能适配策略
  • [BUG] Hadoop-3.3.4集群yarn管理页面子队列不显示任务
  • [C++] 如何使用Visual Studio 2022 + QT6创建桌面应用
  • [CF543A]/[CF544C]Writing Code
  • [DAX] MAX函数 | MAXX函数
  • [github配置] 远程访问仓库以及问题解决
  • [HTML]Web前端开发技术6(HTML5、CSS3、JavaScript )DIV与SPAN,盒模型,Overflow——喵喵画网页
  • [ITIL学习笔记]之事件管理(2)