html字体垂直居中怎么设置_字体垂直居中设置教程

html字体垂直居中怎么设置_字体垂直居中设置教程,第1张

html字体垂直居中怎么设置_字体垂直居中设置教程 1. 元素高度声明的情况下在父容器中居中:绝对居中法<div class="parent"> <div class="absolute-center"></div></div>.parent { position: relative;}.absolute-center { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; height: 70%; width: 70%;}优点:1.跨浏览器,包括 IE8-102.无需其他冗余标记,CSS 代码量少3.完美支持图片居中4.宽度高度可变,可用百分比缺点:1.必须声明高度2. 负外边距:当元素宽度高度为固定值时。


设置 margin-top/margin-left 为宽度高度一 半的相反数,top:50%;left:50%<div class="parent"> <div class="negative-margin-center"></div></div>.parent { position: relative;}.negative-margin-center { position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -150px; height: 300px; width: 300px;}优点:良好的跨浏览器特性,兼容 IE6-7代码量少缺点:不能自适应,不支持百分比尺寸和 min-/max-属性设置内容可能溢出容器边距大小域与 padding,box-sizing 有关3. CSS3 Transform 居中:<div class="parent"> <div class="transform-center"></div></div>.parent { position: relative;}.transform-center { position: absolute; left: 50%; top: 50%; margin: auto; width: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}优点:内容高度可变代码量少缺点:IE8 不支持属性需要浏览器厂商前缀可能干扰其他 transform 效果4. table-cell 居中:<div class="center-container is-table"> <div class="table-cell"> <div class="center-block"></div> </div></div>.center-container.is-table { display: table;}.is-table .table-cell { display: table-cell; vertical-align: middle;}.is-table .center-block { width: 50%; margin: 0 auto;}优点:高度可变内容溢出会将父元素撑开跨浏览器兼容性好缺点:需要额外 html 标记

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/tougao/643223.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-17
下一篇 2022-04-17

发表评论

登录后才能评论

评论列表(0条)

保存