资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/一些居中方式的总结

一些居中方式的总结

renweihub / 2105人阅读

摘要：居中水平居中对于子元素是行内元素或者时使用父元素宽度无论确定不确定均可实现相对于父元素水平居中。

居中 水平居中

对于子元素是行内元素(或者inline-block)时使用text-aling: center; ,父元素宽度无论确定不确定,均可实现相对于父元素水平居中。

对于子元素时块级元素时，使用外边距设置进行水平居中

效果和上图一样

垂直居中

块级元素里的文字垂直居中

对于块级元素来说，它的高度在没有显示设置的情况下，是由子元素高度撑开的，所以对于子元素是内联元素的可以采取对父元素进行设置padding来进行垂直居中

 




  aaaaaaaaaaaaaaaaaafaddadfadfadfadfdfadfadfadfdfadafadfagadgadfadferew

水平垂直居中

子元素宽高确定

使用子元素margin进行居中

子元素宽高不确定

使用定位加margin 居中

使用transform 来实现居中

当子元素是一个图片时,父元素使用text-align:center; 子元素设置vertical-align: middle;，且用父元素的伪元素等同父元素高度后设置为vertical-align:middle;

对父元素设置为table-cell来实现居中，需要设置宽高

flex 布局，使用主轴和侧轴的对齐方式来实现居中

如有错漏，欢迎指正。

GPU云服务器 云服务器 vps日常维护中的一些要点总结 java的一些代码 深度学习的一些应用 php实用的一些代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113181.html

相关文章

  • 前端-CSS3&H5

    摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

    xiaolinbang 评论0 收藏0

  • CSS居中方法总结

    摘要：此时检查元素即可即可实现内层的实现了居中这种方式是最为我们熟知的，其缺点是需要设置子元素的宽度。交叉轴居中当设置了属性时，主轴的方向会改变。垂直居中实现方案用的属性，以及定位，与上面的水平居中类似，只是改为即可。 水平居中实现方案 确定宽度的元素水平居中 1.我们可以通过给该元素的父级设置margin: 0 auto的方式来实现。HTML: ...

    ralap 评论0 收藏0

  • 垂直水平居中的方式总结 +（使用场景）

    摘要：内容无法撑开父级容器表格容器居中使用场景容器内容居中，并不想脱离文档流。缺点不适用于弹层这种盖住页面内容的布局使用和垂直居中值等于元素高度的值使用场景一个容器内部的当韩文字居中优点内容宽高，容器宽高均不用。 以前前端面试基础问题的时候经常会被问到这个问题：但是从来没有做过这样的总结，网上很多人总结的很多，很好。自己干了这么多年，这个问题使用场景还是蛮多的，还是自己总结一下吧（不断更新）...

    YuboonaZhang 评论0 收藏0

发表评论

登陆后可评论

0条评论

renweihub

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<