如何实现水平垂直居中？

[BetaSu]

要回答的问题

实现水平垂直居中布局

最佳答案评选标准

1. 请从以下角度回答该问题：

   • 元素定宽高
   • 元素不定宽高

2. 多种实现方式是加分项

最佳答案

c0dedance的回答

答题同学须知

• 答题规范：请在一次评论中完成作答，后续修改也请编辑该评论，而不是追加新的评论

• 评选标准：最佳答案由围观同学的 👍 和卡颂共同决定

• 评选时间：一般是当日18：00左右评选，如果问题发布当天回答数较少，问题悬赏金额可能增加，同时悬赏时间也会增加

围观同学须知

• 对于你满意的答案，请不要吝惜你的 👍，这是评选最佳答案的依据

• 非答题的评论会被删除，问题相关讨论请在赏金猎人群中进行

[Yill625]

https://juejin.cn/post/6941206439624966152#heading-43

[shabbyaaa]

flex一把梭哈

[c0dedance]

1. flex布局，无需考虑父子宽高

   /* 父元素设置 */
   display: flex;
   justify-content: center;
   align-items: center;

2. 相对定位+transform，无需考虑父子宽高

   /* 子元素设置 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);

3. display：table-cell

   .parent {
     width: 500px;
     height: 500px;
     background-color: pink;
     display: table-cell;
     vertical-align: middle;
     text-align: center;
   }
   .child {
     width: 200px;
     height: 200px;
     background-color: skyblue;
     display: inline-block;
   }

4. 相对定位 + 具体magin

   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: 手动计算;
   margin-left: 手动计算;

5. magin auto，父元素宽高可以不确定，子元素没有具体宽高会铺满父元素

   position: absolute;
   margin: auto;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;

6. 手动计算具体magin，父子元素宽高需要确定

   margin-top: 手动计算;
   margin-left: 手动计算;

[HXML]

方法1：绝对定位+margin:auto div{ width: 200px; height: 200px; background: green;

    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

方法2：绝对定位+负margin div{ width:200px; height: 200px; background:green;

    position: absolute;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-100px;
}

方法3：绝对定位+transform div{ width: 200px; height: 200px; background: green;

    position:absolute;
    left:50%;    /* 定位父级的50% */
    top:50%;
    transform: translate(-50%,-50%); /*自己的50% */
}

方法4：flex布局 .box{ height:600px;

     display:flex;
     justify-content:center;  //子元素水平居中
     align-items:center;      //子元素垂直居中
       /* aa只要三句话就可以实现不定宽高水平垂直居中。 */
}
.box>div{
    background: green;
    width: 200px;
    height: 200px;
}

方法5：table-cell实现居中 display:table-cell; text-align:center; vertical-align: middle;

[muyeyong]

1：元素定宽高 position: absolute top: 50% left: 50% transform: translate(-50%, 50%); 2：元素不定宽高 display: flex justify-content: center align-item: center

[CrisChr]

方法一：绝对定位与负边距（已知宽高） `#container { position: relative; }

center {

  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px;
}`

方法二：绝对定位margin:auto （已知宽高） ` #container { position: relative; height:100px;//必须有个高度 }

center {

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;//注意此处的写法
}`

方法三：绝对定位+css3（未知元素宽高） ` #container { position: relative; }

center {

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}`

方法四：flex #container {//直接在父容器设置即可 height: 100vh;//必须有高度 display: flex; justify-content: center; align-items: center; }

方法五：flex/grid和margin: auto `#container { height: 100vh;//必须有高度 display: grid; }

center {

  margin: auto;
}`

[tangdingga1]

元素定宽高

父元素的宽高为pw,ph。子元素的宽高为cw,ch。

流式布局

.child {
  margin: calc((ph - ch) / 2) auto;
}

改变元素盒属性

.parent {
  line-height: ph;
  text-align: center;
}
.child {
  display: inline-block;
}

元素不定宽高

flex大法好

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}

绝对定位

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

table

.parent {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.child {
    display: inline-block;
}

[goodmornight]

• 水平居中
  • inline元素：text-align:center(不需要知道尺寸)
  • block元素：margin:auto(不需要知道尺寸)
  • absolute元素：left: 50%+margin-left:-${自身宽度}/2
• 垂直居中
  • inline元素：line-height:${容器高度}
  • absolute元素：top:50%+margin-top:-${自身高度}/2
• 水平垂直居中
  • flex布局：flex-direction+justify-content:center+align-items:center(不需要知道尺寸)
  • absolute元素：top:50%+left:50%+ transform: translate(-50%,-50%)(不需要知道尺寸)
  • CSS3的特性 ，浏览器的兼容性可能会差一点
  • absolute元素：top:0+bottom:0+left:0+right:0+margin:auto(不需要知道尺寸)
  • 既要保证兼容性，又要保证子元素是未知的，可以用该方法，margin自动填充
  • absolute元素：top:calc(50% - ${高度}/2)+left:calc(50% - ${宽度}/2)

[blackcoffeecat]

不定宽高的居中方式, 这些居中元素的大小可以被内容撑开，依旧保持居中

1. flex布局

   .container {
   display: flex;
   align-items: center;
   justify-content: center;
   }

2. inline-block布局

   .container {
   text-align: center;
   white-space: nowrap;
   }
   .container::before {
   content: "";
   display: inline-block;
   width: 0;
   height: 100%;
   vertical-align: middle;
   }
   .center-box {
   display: inline-block;
   line-height: 100%;
   vertical-align: middle;
   border: 1px solid red;
   }

需要确定宽高的居中方式：

3. position + margin

   .container {
   position: relative;
   }
   .center-box {
   width: ...;
   height: ...;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
   }

4.transform

.center-box {
    width: ...;
    height: ...;
    margin-top: 50%;
    margin-left: 50%;
    transform: translate(-50%, -50%)
}

兼容性方面，应该是2和3兼容性最好，但是超出父元素大小的时候会对齐在左上角。 附上codepen：https://codepen.io/blackcoffeecat/pen/MWrmWmX

[iKeepLearn]

grid 最简洁

.parent{ display:grid; place-items:center; }