当前位置: 首页 > 科技观察

CSS中水平和垂直居中的N种方法

时间:2023-03-12 01:41:05 科技观察

转载本文请联系三分钟学习前端公众号。水平居中1.如果内联元素是内联元素,则为其父元素设置text-align:center,实现内联元素水平居中test

2.块级元素2.1固定宽高固定宽高时,如下html示例:
下面四种方法的显示效果分别是:方法一:margin:0auto方法二:absolute+margin-left方法三:absolute+calc方法四:absolute+left+right+margin-left2.2宽高不固定当宽高不固定时,如下测试示例:测试示例
下面三种方法效果一样:方法一:使用CSS3中新的transform属性方法二:弹性布局方法三:width:fit-contentfit-content是css3中width属性新增的属性值,可以轻松实现水平居中和垂直居中margin1。内联元素代码示例:测试示例方法一:line-height(单行文字)当有多行时,样式会乱,需要使用vertical-align:middle布局方法二:display:table-cell+vertical-align(多行文字)可以使用vertical-align属性,vertical-align只有在父层为td或th时才会生效。对于其他块级元素,如div、p等,默认是不支持的。为了使用vertical-align,我们需要设置父元素display:table,子元素display:table-cell;vertical-align:middle;方式三:display:inline-block+vertical-alignimplicitghostnode设置ghost节点的高度和ghost节点的基线(通过line-height),来设置ghost节点的x-height,使span的中心线与ghost节点的中心线对齐幽灵节点,你也可以使vertical-align:middle;center方法四:display:gridlayout效果同上方法五:writing-modelayoutwriting-mode属性定义了文本如何水平或垂直布局。效果如上2、块级元素指的是横向布局居中块级元素,同时也把右边的水平方向转换为垂直方向的2.1固定宽高示例代码:/div>以下方法显示效果为:方法一:absolute+margin-top方法二:absolute+calc方法三:absolute+left+right+top+bottom2.2不定宽高不定宽高时,如下测试例子:测试例子下面两种方法效果一样:方法一:使用CSS3新的transform属性,需要设置parent为相对定位(position:relative)方法二:flex布局来源:https://github.com/进阶-前端/日常-面试-问题