CSS居中对齐的各种方式
在调CSS样式的时候,居中对齐是一种很常见的需求,我们可能会苦恼怎么实现才会更好,这就有必要了解CSS实现居中对齐的各种方式了,居中对齐就有水平居中和垂直居中。
水平居中
水平居中首先要区分居中的对象是行内元素还是块级元素。行内元素直接用text-align:center设置就可以了,十分简单。
块级元素的实现方式就比较多了,可以使用margin:0 auto设置外边距自适应来实现水平居中。如果是通过绝对定位absolute的元素可以使用left:50%+margin-left负值(宽度/2)来实现,缺点就是需要知道子元素的宽度,不能满足某些子元素宽度不确定的情况,但我们可以通过在外部包裹一层元素来解决这个问题。
<style>.box {position: relative;width: 200px;height: 200px;background-color: lightgreen;border: 2px solid black;}
.out {position: absolute;left: 50%;top: 50%;}
.in {height: 100px;width: 100px;background-color: pink;margin-left: -50%;margin-top: -50%;}</style><div class="box"><div class="out"><div class="in">测试内容</div> </div> </div>
效果下所示,通过在子元素外部包裹一层div,来代替子元素的绝对定位,外部div通过子元素的宽高自适应,来作用于子元素的margin-left的百分比,从而达到水平居中对齐的目的。
还有一种方式不需要知道子元素的宽度也是能够让绝对定位的元素居中,甚至不需要包裹div,我们需要设置绝对定位的left和right都为0,然后设置margin:0 auto就可以了。
当然,现在最流行的flex布局可以通过justify-content:center十分简单的实现,随着浏览器的发展,flex的兼容性已经很好了,flex对我们前端开发人员来讲十分重要,不管是面试还是工作中都需要,如果还不熟的同学建议赶紧学。
垂直居中
垂直居中同样需要区分行内元素和块级元素,行内元素设置inline-height等于height就可以简单实现,这个是个很常见的技巧。
块级元素可以通过绝对定位absolute,设置top:50%加margin负值(高度/2),就如同水平居中那样,也可以通过transform(-50%,-50%)来设置,但transform作为CSS3的新特性,兼容性对于一些老版本的浏览器还不是很友好,具体使用还是要根据项目而定。像水平居中那样,垂直居中也能通过包裹div或者设置top、bottom为0+margin:auto 0来实现垂直居中。
当然,万能的flex设置align-items:center也是能轻松解决垂直居中的,可见弹性布局的便利与简洁,这还不赶快去学。
CSS居中对齐的各种方式相关推荐
- 文本居于图片左侧html,CSS实现图片与文本的居中对齐的常见方式
1.为图片和文本都设置vertical-align:middle !DOCTYPE html> Page Title .d1>* { vertical-align: middle; } 这 ...
- CSS实现图片与文本的居中对齐的常见方式
1.为图片和文本都设置vertical-align:middle <style>.d1>* {vertical-align: middle;} </style> < ...
- css样式高居中,CSS居中的几种方式
本文主要总结几种常见的CSS居中方式,下面我准备分为三个方向来写,分别是水平居中,垂直居中,水平垂直居中. 水平居中 1.inline元素如何实现水平居中?(text-align:center) 2. ...
- c语言让数组地址对齐,C语言实现比特位数组在目标空间左右居中对齐三种方式...
在LED行业中,一般一个灯亮或者不亮用一个bit位来表示(这里就不谈七彩或者灰度控制卡),假如我们屏幕大小是128点,相当于宽度16个字节,如果我们让两个汉字居中显示(两个汉字占宽度4个字节),很容易 ...
- 【前端】【样式】CSS居中的三种方式
@charset "utf-8"; /* CSS Document */ /** *开发者:萌狼蓝天 *当前版本:v0.1[Debug] *最后更新日期:20210918 **/ ...
- CSS居中的各种实现方式
CSS中如何完美做到居中,一直是令前端工程师头疼的问题.最近读到CSS-TRICKS中的一篇帖子,将居中问题的解决方案策略化.感觉收获很大,翻译过来供大家交流学习. 当我们书写CSS时,让元素居中,是 ...
- css居中对齐的几种情况(待补充
1.一般情况 可以采用转换为块级元素来 (并且此时盒子已经给了宽高) display: block; /*注意 只有块级元素可用 行内块 行内元素都不行*/margin: 100px auto; ...
- 两端文字对齐css,css两端对齐怎么设置,css中文本的对齐有哪些
css两端对齐怎么设置,css中文本的对齐有哪些 内容导读:除了css两端对齐,本文还介绍了主要的css中文本的对齐有哪些.可以看到,常见的文本对齐方式是靠左.居中以及靠右,相对来说css两端对齐用得 ...
- css居中最佳方案,CSS 水平、垂直居中的5种最佳方案
CSS 居中对齐 代码中均省略了浏览器前缀 以下例子以我的个人的标准排序 当然也有更多的居中处理方法 但我觉得只有这5种方法是最完善的解决方案 flex 居中 优点:可对未知高度进行居中处理 .wra ...
- 代码居中对齐_一篇文章带你了解CSS对齐方式
一.居中 1. 居中对齐元素 将块元素水平居中对齐(像 ) , 使用 margin: auto; 设置元素的宽度将阻止它伸展到容器的边缘. 然后元素将占用指定的宽度,剩下的空间将平分在两个边距之间: ...
最新文章
- 中科大倪茹:感谢开源,我从入门竞赛到Top 10的经验分享
- 定制键盘输入处理(1503)
- 关于jq+easy-ui 中上传文件所遇到的问题
- Python中爬虫框架或模块的区别!
- 汇编语言之转移指令和原理
- VIsual Studio编译OpenCV:无法打开python27_d.lib(python36_d.lib)的问题
- 到底什么培训适合你?
- Python概率编程库PyMC应用案例二则
- 图示SaaS:走向平台化,会产生什么变化?
- 【Git版本控制管理】Git入门介绍及Git的安装
- Visual Studio Code的下载与安装
- 极域电子教室学生端全屏广播的破解及编程处理(附静态库)
- zcmu 5142: 巴比伦塔
- SSM+酒店管理系统的设计和实现 毕业设计-附源码260839
- 脑控技术原理及受害者自救
- 从数据仓库到百万标签库,精细化数据管理,这么做就够了
- Tomcat启动错误-Unable to open debugger port (127.0.0.4322)一次性解决方式
- 选手机壳要擦亮双眼,不会遮挡激光对焦传感器的才是好壳子!
- SAS学习笔记55 RTF输出标题级别的设置
- linux交叉编译openssl,交叉编译openssl for linux arm-v5te-linux-gnueabi工具链