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浮动位置讲解(深入理解css布局之定位与浮动)
- css 页面加载样式(如何只在IE上加载CSS样式表)
- css瀑布流布局
- css导航栏特效(CSS导航栏及弹窗示例代码)
- css3旋转动画教学(css3动画效果抖动解决方法)
- css3滤镜过渡效果代码(CSS3实现的3D隧道效果)
- css水平或者垂直居中的写法(深入理解CSS行高line-height与文本垂直居中的原理)
- css文字图片垂直居中对齐(CSS设置文字图片垂直居中的方法总结)
- css在ie中怎么显示不正常(IE6和IE7中行内元素后的浮动元素被折行的问题解决)
- css盒子模型有什么用处(深入理解CSS中的盒子模型)
- html+css网页布局实例(网页布局入门教程 如何用CSS进行网页布局)
- css鼠标点击效果怎么样(CSS实现鼠标滑过鼠标点击代码写法)
- css 圆角卡片样式(css实现带圆角三角型的示例代码)
- css3过渡技巧视频(css3过渡_动力节点Java学院整理)
- cssgrid普及情况(5分钟教你学会 CSS Grid 布局)
- css box样式(解析CSS的box model盒模型及其内的子元素布局控制)
- 周杰伦演唱会门票(周杰伦演唱会门票多少钱一张2023)
- 焕然一新 成都轨道集团官方网站改版上线(成都轨道集团官方网站改版上线)
- 成都轨道交通19号线二期全线电通(成都轨道交通19号线二期全线电通)
- 19号线二期全线电通 轨道交通项目最新进展来了(19号线二期全线电通)
- 涉及3条地铁线路 成都这4座轨道交通站点有新名字了(涉及3条地铁线路)
- 来了 成都轨道交通5条线路刷新 进度条(成都轨道交通5条线路刷新)
热门推荐
- laravel算法(laravel批量生成假数据的方法)
- mysql和utf8哪个好(为什么在MySQL中不建议使用UTF-8)
- Docker 运行多个Springboot的详细教程(Docker 运行多个Springboot的详细教程)
- pythonshell入门教程(python获取交互式ssh shell的方法)
- css中好看的渐变颜色代码(CSS Tips:段落每行渐变色文本效果的实现方法)
- 小米机器狗用什么二次开发(小米正式开源 SQL 智能优化与改写工具 SOAR)
- pyqt5代码实例(pyqt5实现登录界面的模板)
- 宝塔mysql怎么设置优化(宝塔面板mysql内存占用高如何优化)
- mysql数据库主键选择的详解(图文详解MySQL中的主键与事务)
- Request.Url的值有可能会带端口号