前端小册

Appearance

On this page

垂直居中布局 ​

居中布局可以利用 margin: 0 auto 或者 inline-block 内联块元素等等，但是垂直效果，我们改怎么来做呢？所有源码在此

常见的 HTML 格式为

html
<div class="parent_0">
    <div class="child_0"></div>
</div>

绝对定位和 margin ​

css
.parent_0 {
    position: relative;
    height: 500px;
    background-color: bisque;
}
.child_0 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-left: -100px;
    margin-top: -100px;
    background-color: red; 
}

需要计算子元素的半宽高

绝对定位和 transform ​

css
.parent_1 {
    position: relative;
    height: 500px;
    background-color: bisque;
}
.child_1 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 330px;
    transform: translate3d(-50%, -50%, 0);
    background-color: red; 
}

不用计算，但是兼容性需要考虑

绝对定位的另类用法 ​

css
.parent_2 {
    position: relative;
    height: 500px;
    background-color: bisque;
}
.child_2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50%;
    height: 30px;
    background-color: red; 
}

不用计算子元素，兼容性好，子元素高宽完美自适应，可以百分比，可以任意高宽

常见于弹出框，遮罩

flex 布局 ​

css
.parent_3 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
    background-color: bisque;
}
.child_3 {
    width: 200px;
    height: 330px;
    background-color: red; 
}

简单高效，父级需要指定高度；兼容性需要考虑

inline-block 属性与伪类元素 ​

css
.parent_4 {
    height: 500px;
    font-size:0; /* 避免inline-block之间产生间隔 */
    text-align: center;
}
.parent_4::after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.child_4 {
    display: inline-block;
    width: 200px;
    height: 200px;
    vertical-align: middle;
}

兼容性较好

table 与 table-cell 布局 ​

js
.parent_5 {
    display: table;
    width: 100%;
    height: 500px;
}
.child_5 {
    display: table-cell;
    vertical-align: middle;
}
.child_5 .content {
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

需要改动 HTML 格式，兼容性较好

html
<div class="parent_bg parent_5">
    <div class="child_5">
        <div class="child_bg content">垂直居中</div>
    </div>
</div>

总结 ​

多种写法，需要考虑到：

  • 兼容性
  • 居中元素是否需要自适应宽高
  • 交互JavaScript的效果