首页 > 代码库 > CSS垂直居中布局方法

CSS垂直居中布局方法

2024-08-20 16:55:17   212人阅读

整理一下个人认为比较好的CSS垂直居中的布局方法。

1. 绝对定位+负值margin。

//长宽的设置只是为了说明，实际使用没有限制
<div id="container-outer">
  <div id="container-inner"></div>
</div>
//CSS
#container-outer {
  width: 200rem;
  height: 100rem;
  position: relative;
}

#container-inner {
  width: 100rem;
  height: 50rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25rem;
  margin-left: -50rem;
}

2. 高度为100%的inline-block的Before伪类为基准使之后的inline-block元素都可以以这个伪类vertical-align: middle对齐。

//长宽的设置只是为了说明，实际使用没有限制
<div id="container-outer">
  <img id="container-inner">
</div>
//CSS
#container {
  width: 200rem;
  height: 100rem;
}

#container:before {
  content: ‘‘;
  display: inline-block;
  vertical-align: middle;
  height: 100%;    
}

#container-inner {
  width: 100rem;
  height: 50rem;
  display: inline
  vertical-align: middle;
}

暂时记录这两个方法，当然还有位移的方法和方法1差不多。

之后有更好的方法再补充。

 

CSS垂直居中布局方法


联系
我们