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;
}

效果

相关推荐
IT_陈寒几秒前
5个Java 21新特性实战技巧,让你的代码性能飙升200%!
前端·人工智能·后端
咖啡の猫2 分钟前
Vue内置指令与自定义指令
前端·javascript·vue.js
昔人'9 分钟前
使用css `focus-visible` 改善用户体验
前端·css·ux
前端双越老师12 分钟前
译: 构建高效 AI Agent 智能体
前端·node.js·agent
艾小码20 分钟前
告别数据混乱!掌握JSON与内置对象,让你的JS代码更专业
前端·javascript
liangshanbo12156 小时前
写好 React useEffect 的终极指南
前端·javascript·react.js
哆啦A梦15888 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_8 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD8 小时前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui