css 垂直居中布局

jason_yang
155 阅读4分钟

已知

<!DOCTYPE html>
<html>
<head>
    <title>居中对齐</title>
    <style>
        .outer {
            border: 1px solid red;
            height: 300px; 
            width: 100px;
        }
        .inner {
            border: 1px solid black; 
            height: 100px;   
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

image.png

实现垂直居中对齐

image.png

1.行高内元素居中，line-height + 内元素inline-block + vertical-algin:middle

  1. 父容器使用line-height，对应的行内元素会自动居中
  2. 设置子元素为inline-block，
  3. 最后设置行内的垂直居中方式vertical-algin:middle
.outer {
    border: 1px solid red;
    height: 300px;  
    width: 100px;  
    line-height: 300px;
}
.inner {
    border: 1px solid black; 
    height: 100px;    
    width: 100px; 
    display: inline-block;
    vertical-align: middle;
}

1.1 伪类方式实现

.outer {
    border: 1px solid red;
    height: 300px; 
    width: 100px;
}  
.inner::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

2.上下内边距 padding:100px 0;

首页先去掉父容器的高度，通过padding-top padding-bottom 控制中间元素居中对齐。

.outer {
    border: 1px solid red;
    /* height: 300px;  不能设置高度 */
    width: 100px; 
    padding: 100px 0; /*通过padding上下 固定宽度*/
}
.inner {
    border: 1px solid black; 
    height: 100px;    
    width: 100px; 
}

2.1上下外边距 margin:100px 0;

首页先去掉父容器的高度，通过margin-top margin-bottom 控制中间元素居中对齐。

.outer {
    border: 1px solid red;
    /* height: 300px;  不能设置高度 */
    width: 100px; 
}
.inner {
    border: 1px solid black; 
    height: 100px;    
    width: 100px; 
    margin: 100px 0; /*通过 margin 上下固定宽度*/
}

3.flex + algin-items:center

使用display:flex ，列对齐使用居中center

 .outer {
    border: 1px solid red;
    height: 300px; 
    width: 100px;
    display: flex; 
    align-items: center;
}
.inner {
    border: 1px solid black; 
    height: 100px;   
    width: 100px;
}

3.1 flex + algin-self:center

使用display:flex ，列对齐使用居中center

 .outer {
    border: 1px solid red;
    height: 300px; 
    width: 100px;
    display: flex; 
}
.inner {
    border: 1px solid black; 
    height: 100px;   
    width: 100px;
    align-self: center;
}

3.2 flex + margin:auto 0

.outer {
    border: 1px solid red;
    height: 300px; 
    width: 100px;
    display: flex;  
}
.inner {
    border: 1px solid black; 
    height: 100px;   
    width: 100px;
    margin: auto 0; /*使用边距自动计算对齐*/
}

4. 绝对定位absolute + top:50% ,margin-top: -50px

通过绝对定位，同事距离顶部50%，再减去自身的高度的一半，这里的50是固定值

.outer {
    border: 1px solid red;
    height: 300px; 
    width: 100px;
    position: relative;
}
.inner {
    border: 1px solid black; 
    height: 100px;   
    width: 100px; 
    position: absolute;
    top: 50%;
    margin-top: -50px;
}

4.1 绝对定位absolute + top:50% , translateY(-50%)

通过绝对定位，同事距离顶部50%，再减去自身的50%的高度

.outer {
    border: 1px solid red;
    height: 300px; 
    width: 100px;
    position: relative;
}
.inner {
    border: 1px solid black; 
    height: 100px;   
    width: 100px; 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

4.2 绝对定位absolute + top:0,bottom:0 , margin:auto 0

通过绝对定位，top和bottom都是0 拉满整个高度，在通过边距自动计算

.outer {
    border: 1px solid red;
    height: 300px; 
    width: 100px;
    position: relative;
}
.inner {
    border: 1px solid black; 
    height: 100px;   
    width: 100px; 
    position: absolute;
    top: 0;
    bottom: 0;
    margin:auto 0;
}

5.display: table-cell + middle; + inline-block;

  1. 把父容器改成table的cell
  2. 然后通过cell设置里面的内容vertical-align: middle;垂直对齐
  3. 设置子元素为inline-block行内元素
.outer {
    border: 1px solid red;
    height: 300px;   
    width: 100px;  
    display: table-cell; 
    vertical-align: middle;
}
.inner {
    border: 1px solid black; 
    height: 100px;    
    width: 100px;
    display: inline-block;
}

6. 网格display: grid + align-items:center

.outer {
    border: 1px solid red;
    height: 300px; 
    width: 100px;
    display: grid;
    grid-template-columns: 1fr ;
    align-items: center;

}
.inner {
    border: 1px solid black; 
    height: 100px;   
    width: 100px;  
}

6.1网格display: grid + align-content:center

.outer {
    border: 1px solid red;
    height: 300px; 
    width: 100px;
    display: grid;
    grid-template-columns: 1fr ;
    align-content: center; /*align-content 一样可以居中*/

}
.inner {
    border: 1px solid black; 
    height: 100px;   
    width: 100px;  
}
  • align-items 用于当前行的垂直对齐方式。
  • align-content 用于当前整个容器的整体对齐方式,针对多行。

6.2 网格display: grid + margin:auto 0

.outer {
    border: 1px solid red;
    height: 300px; 
    width: 100px;
    display: grid;
    grid-template-columns: 1fr ;
}
.inner {
    border: 1px solid black; 
    height: 100px;   
    width: 100px;  
    margin:auto 0;
}

6.3 网格display: grid + align-self

.outer {
    border: 1px solid red;
    height: 300px; 
    width: 100px;
    display: grid;
    grid-template-columns: 1fr ;
}
.inner {
    border: 1px solid black; 
    height: 100px;   
    width: 100px;  
    align-self:center ;/* 在子对象再定义自己对应的对齐方式 */
}

7. writing-mode

writing-mode 定义了文本水平或垂直排布以及在块级元素中文本的行进方向

 .outer {
    border: 1px solid red;
    height: 300px;   
    width: 100px;   
    writing-mode: vertical-lr; /*改变文本的书写方向，从原来的左右改成上下*/
    text-align: center; /* 这里的居中已经重书写的左右居中变成上下居中 */
}
.inner {
    border: 1px solid black; 
    height: 100px;    
    width: 100px;
    display: inline-block; 
}
avatar
文章
阅读
粉丝