type
status
date
slug
summary
tags
category
icon
password
CSS的世界真是奇妙！入职我司以来，涉及蛮多有关CSS相关的需求和内容，如animation、伪类、媒体查询、mask、布局、对齐方式等等...笔者今天来记录一下和对齐方式相关的知识点，方便复习和巩固😎工作中最常用的对齐方式莫过于
居中对齐、水平居中、垂直居中这三种，我们一一来介绍都有哪些方法可以实现这些对齐方式。先贴出本篇文章用到的html和css代码垂直居中
垂直居中的效果如上。实现方式有(直接上代码)：table-cell + vertical-align
该方法用得还是比较少的。通过
display: table-cell;强制父元素为表格单元格，从而进行垂直或水平居中absolute + transform
使用绝对定位并减元素自身宽高的一半来进行垂直或水平居中。适用于
元素本身宽高未知的情况flex + align-items
较为流行的对齐方式。适用于
一个或多个元素需要对齐的情况水平居中
水平居中的效果如上。实现方式有(直接上代码)：inline-block + text-align
适用于
文本内容或inline-*类型的元素table + margin
absolute + transform
flex + justify-content
水平垂直居中
水平垂直居中的效果如上，实现方式很简单，同时满足垂直居中和水平居中即可达到水平垂直居中的效果。实现方式有(直接上代码)：inline-block + table-cell
absolute + transform
flex
以上就是笔者常用的有关
居中对齐方式的实现方法，基本也是够用了。笔者并没有具体介绍上述实现方法中的属性，相信读者应该不会陌生这些知识点😏 如果想要深入了解flex相关属性，可以翻看笔者之前写的有关Flex 布局相关文章，感谢阅读！- 作者:Leeson
- 链接: /article/center
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
相关文章