css盒子水平垂直居中

目录

1采用flex弹性布局:

2子绝父相+margin:负值:

3.子绝父相+margin:auto:

4子绝父相+transform:

5通过伪元素

6table布局

7grid弹性布局


文字 水平垂直居中链接:文字水平垂直居中-CSDN博客

以下为盒子水平垂直居中

复制代码
<template>
  <div>
    <div class="father">
      <div class="son"></div>
    </div>
  </div>
</template>

1采用flex弹性布局:

在父元素设置display: flex表示该容器内部的元素将按照flex进行布局,再设置align-items: center表示这些元素将相对于本容器水平居中,justify-content: center实现垂直居中。

javascript 复制代码
.father{
  width: 400px;
  height: 300px;
  background-color: rebeccapurple;
  display: flex;
  justify-content: center;
  align-items: center;
}
.son{
  width: 200px;
  height: 100px;
  background-color: aqua;
}

效果

2子绝父相+margin:负值:

设置left和top为50%,此时位置会偏右自身元素的宽高,再设margin-left和margin-top为自身元素宽高的负一半,实现水平垂直居中。

javascript 复制代码
.father {
  width: 400px;
  height: 300px;
  background-color: rebeccapurple;
  position: relative;
}
.son {
  width: 200px;
  height: 100px;
  background-color: palegoldenrod;
  position: absolute;
  top: 50%;
  left: 50%;
  //宽度的一半
  margin-left: -100px;
  //高度的一半
  margin-top: -50px;
}

效果:

3.子绝父相+margin:auto:

,设置top、left、right、bottom为0,在设置margin:auto

javascript 复制代码
.father{
        width:400px;
        height:300px;
        background-color: rebeccapurple;
        position: relative;   //父级设置为相对定位
    }
    .son{
        width:100px;
        height:40px;
        background: red;
        position: absolute;   //设置为子级绝对定位
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }

效果

4子绝父相+transform:

设置left和top为50%,此时位置会偏右自身元素的宽高,再设transform: translateX(-50px) translateY(-50px);

javascript 复制代码
.father{
  width: 400px;
  height: 300px;
  background-color: rebeccapurple;
  position: relative;
}
.son{
  width: 200px;
  height: 100px;
  background-color: skyblue;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-100px) translateY(-50px);
}

效果

5通过伪元素

javascript 复制代码
.father{
  width: 400px;
  height: 300px;
  background-color: rebeccapurple;
  text-align: center;
}
.father::before{
  content : '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.son{
  width: 200px;
  height: 100px;
  background-color: pink;
  vertical-align: middle;
  margin: 0 auto;
  display: inline-block;
}

效果

6table布局

设置父元素为display:table-cell,子元素设置 display: inline-block。利用verticaltext-align可以让所有的行内块级元素水平垂直居中。

javascript 复制代码
.father {
  display: table-cell;
  width: 400px;
  height: 300px;
  background: rebeccapurple;
  vertical-align: middle;
  text-align: center;
}
.son {
  display: inline-block;
  width: 200px;
  height: 100px;
  background: forestgreen;
}

效果

7grid弹性布局

在父元素设置display: drid表示该容器内部的元素将按照flex进行布局,再设置align-items: center表示这些元素将相对于本容器水平居中,justify-content: center实现垂直居中。

javascript 复制代码
.father{
  width: 400px;
  height: 300px;
  background-color: rebeccapurple;
  display: grid;
  justify-content: center;
  align-items: center;
}
.son{
  width: 200px;
  height: 100px;
  background-color: greenyellow;
}

效果

相关推荐
某公司摸鱼前端13 分钟前
ES13(ES2022)新特性整理
javascript·ecmascript·es13
ai小鬼头1 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz1 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子1 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边1 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客1 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8881 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
幼儿园技术家1 小时前
微信小店与微信小程序简单集成指南
前端
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试
涵信9 天前
第一节 布局与盒模型-Flex与Grid布局对比
前端·css