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/进阶-前端/日常-面试-问题

上一篇：Kubernetes监控最佳实践

下一篇：2017 年软件开发人员需要面对的七个改变

CSS中水平和垂直居中的N种方法相关文章