【CSS】水平垂直居中

  1. 给父盒子设置属性 flex

    • display: flex;写在父元素上这就是定义了一个伸缩容器
    • justify-content:center 设置主轴对齐方式为居中,默认是横轴。子元素居中。
    • align-items:center 设置纵轴对齐方式为居中,默认是纵轴。子元素居中。
  2. 给父盒子和子盒子设置属性

    给容器设置 display: flex; 子项设置 margin: auto;

  3. 绝对定位设置居中

    容器设置position: relative。子元素设置 position: absolute; left: 50%; top: 50%; transfrom: translate(-50%, -50%);

    优点就是不用关心子元素的长和宽,但是这种方法兼容性依赖 translate2d 的兼容性

  4. 绝对定位另一种方法

    需要给子元素设置 position: absolute; 设置固定宽度和高度;top、left、bottom、right都设置为0; margin设置为auto;也能实现垂直水平居中。

flex:1 的作用

  • 首先 flex: 1; 等同于 flex: 1 1 auto;
  • flex: 1 实际上是三个属性的缩写:flex-grow: 1; flex-shrink: 1 flex-basis: auto;
相关推荐
LuckySusu2 分钟前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu2 分钟前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu6 分钟前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在8 分钟前
6个值得收藏的.NET ORM 框架
前端·后端·.net
LuckySusu13 分钟前
【js篇】深入理解 JavaScript 原型与原型链
前端·javascript
文心快码BaiduComate17 分钟前
文心快码入选2025服贸会“数智影响力”先锋案例
前端·后端·程序员
云枫晖30 分钟前
手写Promise-构造函数
前端·javascript
文心快码BaiduComate31 分钟前
用Comate Zulu开发一款微信小程序
前端·后端·微信小程序
王王碎冰冰35 分钟前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
naice2 小时前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git