css实现居中布局(水平居中,垂直居中,水平居中)

familyAboveAll

水平居中

  • 行内元素:text-align:center
  • 块元素

    1. margin: 0 auto;
    2. display:flex;justify-content: center;

垂直居中

  1. display:flex;align-items: center;
  2. line-height: 100px;

水平垂直居中

<div class="box-wrapper">
  <div class="box"></div>
</div>

将box元素水平垂直居中有以下几种方式

已知宽高

  • positon+margin
.box {
  width: 200px;
  height: 200px;
  background: skyblue;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
}

不清楚宽高

  • position+transform
.box {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
  • flex布局
.box-wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
阅读 1.2k
156 声望
17 粉丝
0 条评论
156 声望
17 粉丝
文章目录
宣传栏