不定宽高水平且垂直居中的实现方法

最新推荐文章于 2022-03-27 17:44:26 发布

Dear_Mr

最新推荐文章于 2022-03-27 17:44:26 发布

阅读量828

点赞数

分类专栏： css 文章标签： css flex 布局不定宽高居中

本文链接：https://blog.csdn.net/Dear_Mr/article/details/76714132

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

不定宽高水平且垂直居中的实现方法

flex布局

效果预览

<div class="parent">
<div class="child">水平垂直居中</div>
</div>

div.parent {
  display: flex;
  justify-content: center; /*主轴对齐方式*/
  align-items: center; /*交叉轴上如何对齐*/
  background: #EDEDED;
  width: 800px;
  height: 400px;
}
div.child {
  background: green;
}

绝对定位+transform

预览地址

<div class="parent">
  <div class="child">水平垂直居中</div>
</div>

div.parent {
  position: relative;
  width: 800px;
  height: 300px;
  background: #EDEDED;
}
div.child {
  background: green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

table-cell

效果预览

<div class="parent">
  <div class="child">水平垂直居中</div>
</div>

div.parent {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background: #EDEDED;
  width: 300px;
  height: 300px;
}
div.child {
  display: inline-block;
  background: green;
}