1.line-height
html :
div.parent div.child
css :
.parent height 736px line-height @height2.display: table
html :
div.parent div.child
css :
.parent display table .child display table-cell vertical-align middle3.position
html :
div.parent div.child
css :
.parent position relative .child position absolute top 50% height 736px margin-top -(@height / 2)4.position
html :
div.parent div.child
css :
.parent position relative .child position absolute top 0 bottom 0 margin auto5.padding
html :
div.parent div.child
css :
.parent padding 5% 0 .child padding 10% 06.float
html :
div.parent div.floater div.child
css :
html, body height 100% .parent height @height .floater float left height @height / 2 width @height margin-bottom -50px .child clear both height 100px7. :before
要求display inline-block
html :
div.parent div.child
css :
.parent:before content "" display inline-block height 100% vertical-align middle .child display inline-block vertical-align middle8.translate
html :
div.parent div.child
css :
.parent height 100% position relative .child position absolute top @height / 2 transform translateY(-50%)9. display: box
html :
div.parent div.chlid
css :
.parent display -webkit-box -webkit-box-align center10.flex
html :
div.parent div.child
css :
.parent display flex align-items center
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/112162.html
摘要:包括水平居中,垂直居中,还有水平垂直居中。如果要再要细分,还要分浮动元素绝对定位的居中。样式水平居中的元素图片的水平居中图片的居中,比较特殊。 2018.05.29 居中一个元素?你会想到啥?这里面的知识还真不少。包括水平居中,垂直居中,还有水平垂直居中。如果要再要细分,还要分浮动元素、绝对定位的居中。为了代码简介,没有加背景和其他样式,需要看效果的,可以加上背景。 目录: 第一...
摘要:笔记整理之一水平垂直居中固定宽高一般使用负值进行居中不固定宽高一般使用和进行下面三种方案平常都很少被使用的到移动端一般使用方案在移动端都可以使用文本水平垂直居中文本垂直文本垂直居中移动端水平垂直居中垂直居中方案快级元素 笔记整理之一:水平垂直居中 PC固定宽高、一般使用maring负值进行居中PC不固定宽高、一般使用relative和left进行 下面三种方案平常都很少被使用的到 ...
摘要:水平居中水平居中可分为行内元素水平居中和块级元素水平居中行内元素水平居中这里行内元素是指文本图像按钮超链接等,只需给父元素设置即可实现。 1、水平居中 水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中 这里行内元素是指文本text、图像img、按钮超链接等,只需给父元素设置text-align:center即可实现。 .center{ te...
摘要:水平居中水平居中可分为行内元素水平居中和块级元素水平居中行内元素水平居中这里行内元素是指文本图像按钮超链接等,只需给父元素设置即可实现。 1、水平居中 水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中 这里行内元素是指文本text、图像img、按钮超链接等,只需给父元素设置text-align:center即可实现。 .center{ te...
阅读 949·2023-04-26 01:47
阅读 1602·2021-11-18 13:19
阅读 1959·2019-08-30 15:44
阅读 612·2019-08-30 15:44
阅读 2274·2019-08-30 15:44
阅读 1212·2019-08-30 14:06
阅读 1403·2019-08-30 12:59
阅读 1888·2019-08-29 12:49