css垂直左右居中的方式(css常用元素水平垂直居中方案)
类别:Web前端 浏览量:1674
时间:2022-04-03 12:16:16 css垂直左右居中的方式
css常用元素水平垂直居中方案flex实现水平垂直居中
适用场景:父子宽高都可未知(比较推荐这种方式,简单,而且目前兼容性也不错。)
<html> <head> <style> .parent { width: 100%; height: 100px; background: cyan; display: flex; justify-content: center; align-items: center; } .son { width: 20%; height: 20%; background: pink; } </style> </head> <body> <li class='parent'> <li class='son'></li> </li> </body> </html>
绝对定位加上负margin
适用场景:父元素宽高已知未知都行,但是首先得有宽高。其次子元素的宽高必须已知,因为需要设置子元素的负margin. (也可以将负margin设置成translate来做位移实现)
<html> <head> <style> .parent { position: relative; width: 200px; height: 200px; background: pink; } .son { position: absolute; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; width: 50px; height: 50px; background: yellow; } </style> </head> <body> <li class='parent'> <li class='son'></li> </li> </body> </html>
绝对定位 + auto margin
适用场景:父子元素宽高都未知的情况(该方式不需要明确知道子元素宽高,子元素宽高可用百分比,对于子元素宽高不确定需要居中的情况比较适合。)
<html> <head> <style> .parent { position: relative; width: 200px; height: 200px; background: cyan; } .son { position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; width: 10%; height: 10%; background: yellow; } </style> </head> <body> <li class='parent'> <li class='son'></li> </li> </body> </html>
网格布局
适用场景:父子元素宽高未知,兼容性不大好
<html> <head> <style> .parent { display: grid; } .son { jusitify-self: center; align-self: center; } </style> </head> <body> <li class='parent'> <li class='son'></li> </li> </body> </html>
Table-cell + text-align + vertical-align
适用场景: 父元素大小已知(非百分比高度),子元素大小未知,但子元素须为行内块元素,较好的兼容性
<html> <head> <style> .parent { display: table-cell; vertical-align: middle; text-align: center; width: 100vw; height: 90vh; background-color: yellowgreen; } .son { display: inline-block; width: 200px; height: 200px; background-color: Indigo; } </style> </head> <body> <li class='parent'> <li class='son'></li> </li> </body> </html>
伪元素
适用场景:父子宽高都可未知,子元素需为行内块元素(这种方式其实就是使用伪元素的高度为100%,子元素和伪元素都设置 vertical-align: middle实现垂直居中的效果)
<html> <head> <style> .parent { height: 100vh; width: 100vw; text-align: center; background: #c0c0c0; } .parent:before { content: "\200B"; display: inline-block; height: 100%; vertical-align: middle; } .son { display: inline-block; vertical-align: middle; width: 200px; height: 200px; padding: 10px 15px; background: #f5f5f5; } </style> </head> <body> <li class="parent"> <li class="son"></li> </li> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
标签:css
您可能感兴趣
- css中margin什么意思(CSS margin全面了解)
- CSS vertical-align的用法
- 简述css在html页面中的使用方法(10分钟理解CSS BFC原理及其应用)
- css3字体怎么设置(使用CSS3 font-feature-settings特性减除字体动画震颤效果)
- divcss页面布局步骤(横向两列布局左列固定,右列自适应的4种CSS实现方式)
- css设置超链接样式
- css 图片边缘虚化(CSS3对图片照片进行边缘模糊处理的实现)
- class对应的css(CSS的class与id常用的命名规则)
- css分割线使用教程(css实现文章分割线样式的多种方法总结)
- cssgrid普及情况(5分钟教你学会 CSS Grid 布局)
- CSS中background-attachment
- 微信小程序图片加特效(微信小程序实现可实时改变转速的css3旋转动画实例代码)
- css中的float的使用
- css3中过渡动画的属性(css3 中实现炫酷的loading效果)
- css如何做出矩形三角流程效果(css做个波浪悬浮球的实现方法)
- 如何检查css 兼容性(CSS浏览器兼容性常见问题总结大全推荐)
- 寒假旅游攻略(成都寒假旅游攻略)
- 菲律宾旅游攻略(菲律宾旅游攻略地图)
- 清华大学难考吗(清华大学考研录取分数线)
- 观花盆栽佛肚竹盆景制作及养护(观花盆栽佛肚竹盆景制作及养护)
- 春天养佛肚竹,做好这几件事,叶绿根壮寓意好 越养越旺家(春天养佛肚竹做好这几件事)
- 律界衣品最好,时尚圈学识数高,41岁的Amal堪称现实版的傲骨贤妻(时尚圈学识数高)
热门推荐
- 怎么查看mysql运行日志(通过Query Profiler查看MySQL语句运行时间的操作方法)
- Sql的decimal、float、double类型的区别
- php缓存技术学习(简单实用的PHP文本缓存类实例)
- php如何将数组清空(PHP实现数组向任意位置插入,删除,替换数据操作示例)
- dedecms会员功能(dedecms注册中文会员无法打开空间的解决方法)
- 面向对象的装封、继承、多态的概念理解
- dedecms自适应代码(dedecms下广告延时加载显示,大大提高网页访问的速度)
- sqlserver2000安装之后在哪打开(SQL2000安装后,SQL Server组无项目解决方法)
- 阿里云服务器可以连接几个面板(阿里云云服务器宝塔面板的安装图文教程详解)
- vue实现一个炫酷的日历组件(vue利用Moment插件格式化时间的实例代码)