前端经典案例：CSS水平、垂直居中布局

最新推荐文章于 2024-08-28 09:51:36 发布

星河帆帆

最新推荐文章于 2024-08-28 09:51:36 发布

阅读量466

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/u012720047/article/details/106395662

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、水平居中

1.1、行内元素水平居中

这里行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center即可实现。

.box {
    text-align: center;
    background-color: #f6e5dd;
}
<div class="box">
    水平居中
</div>

1.2、块级元素水平居中

1.2.1、固定宽度块级元素水平居中

只需给需要居中的块级元素加margin:0 auto即可，但这里需要注意的是，这里块状元素的宽度width值一定要有

.box {
    width: 200px;
    margin: 0 auto;  /*左右margin值auto自动，不能为0*/
    
    background-color: #f6e5dd;
}
<div class="box">水平居中</div>

1.2.2、不固定宽度块级元素水平居中

方法1：设置table布局

通过给要居中显示的元素，设置display:table，然后设置margin:0 auto来实现

.box {
    display: table;
    margin: 0 auto;
    
    background-color: #f6e5dd;
}
<div class="box">水平居中</div>

方法2：设置子元素inline-block（多个块状子元素均可居中）

子元素设置inline-block，同时父元素设置text-align:center

.box {
    text-align: center;
    
    background-color: #f6e5dd;
}
.inlineblock-div {
    display: inline-block;  /*不能设置为block或其他*/
    
    text-align: center;
    background-color: #d5eeeb;
}
<div class="box">
    <div class="inlineblock-div">子元素1</div>
    <div class="inlineblock-div">子元素2</div>
</div>

方法3：设置flex布局

只需把要处理的块状元素的父元素设置display:flex,justify-content:center;

.box {
    display: flex;
    justify-content: center;
    
    background-color: #f6e5dd;
}
.flex-div {
    background-color: #d5eeeb;
    border: 2px solid red;
}
<div class="box">
    <div class="flex-div">子元素1</div>
    <div class="flex-div">子元素2</div>
</div>

2、垂直居中

2.1、单行文本垂直居中

设置line-height=height；

.box {
    height: 100px;
    line-height: 100px;
    
    background-color: #f6e5dd;
}
<div class="box">垂直居中的文本</div>

2.2、多行文本垂直居中

通过设置父元素table，子元素table-cell和vertical-align

vertical-align:middle的意思是把元素放在父元素的中部

.box {
    display: table;
    width: 300px;
    height: 200px;
    
    background-color: #f6e5dd;
}
.table-div {
    display: table-cell;
    vertical-align: middle;
    
    border: 5px solid blue;
}
<div class="box">
    <div class="table-div"> 
        垂直居中的文本<br/>
        另一行文本
    </div>
</div>

2.3、块级元素垂直居中

方法1：flex布局

在需要垂直居中的父元素上，设置display:flex和align-items：center

要求：父元素必须显示设置height值

.box {
    height: 100px;
    width: 300px;
    display: flex;
    align-items: center;
    
    background-color: #f6e5dd;
}
.item {
    background-color: #d5eeeb;
}
<div class="box">
    <div class="item">垂直居中的块级元素</div>
</div>

方法2：利用position和top和负margin（需知宽高）

.parent {
    position: relative;
    height: 200px;
    width: 200px;
    
    background-color: #f6e5dd;
}


.child {
    position: absolute;
    height: 100px;
    width: 150px;
    top: 50%;
    margin-top: -50px;  /*高度的一半*/
    line-height: 100px;
    background-color: #d5eeeb;
}
<div class="parent">
    <div class="child">已知高度垂直居中</div>
</div>

方法3：利用position和top和transform

transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。

.parent {
    position: relative;


    height: 200px;
    width: 200px;
    background-color: #f6e5dd;
}
.child {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);


    background-color: #d5eeeb;
}
<div class="parent">
    <div class="child">已知高度垂直居中</div>
</div

3、水平垂直居中

3.1、绝对定位 + 负 Margin

原理：首先利用 absolute 定位把容器块左顶角对准浏览器中心，然后再使用负 margin 把容器块向左移动自身宽度的一半，向上移动自身高度的一半，即可以把容器块的中心移到浏览器中心。
优点：兼容性好
缺点：需要知道宽高，不够灵活

.container {
    /* ---容器盒子水平、垂直居中对齐--- */
    width: 200px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;    /* 宽度的一半 */
    margin-top: -50px;  /* 高度的一半 */


    /* ---内容居中对齐--- */
    line-height:100px;	/* 同容器盒子的高度一致 */
    text-align: center;
    background: #f6e5dd;
}
<div class="container">水平、垂直居中布局</div>

3.2、绝对定位+Transform

原理：首先利用 absolute 定位把容器块左顶角对准浏览器中心，然后再使用 CSS3 transform 的 translate(x,y) 把容器块向左(x)移动自身宽度的一半，向上(y)移动自身高度的一半，即可以把容器块的中心移到浏览器中心。
优点：不依赖盒子的宽高，比较灵活
缺点，兼容不好，在移动设备上建议使用

.container {
    /* ---容器盒子水平、垂直居中对齐--- */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);


    width: 200px;
    height: 100px;


    /* ---内容居中对齐--- */
    line-height: 100px;
    /* 同容器盒子的高度一致 */
    text-align: center;
    background: #e6f4f5;
}
<div class="container">水平、垂直居中布局</div>

3.3、绝对定位 + 自动 Margin

原理：浏览器自动计算绝对定位的容器块上下左右外边距。
优点：灵活切兼容性好（IE8+）
缺点：适用于本身有尺寸的元素（比如图片），对于段落等必须显式设置其宽高

.container {
    /* ---容器盒子水平、垂直居中对齐--- */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;


    width: 200px;
    height: 100px;


    /* ---内容居中对齐--- */
    line-height: 100px;
    /* 同容器盒子的高度一致 */
    text-align: center;
    background: #d5eeeb;
}
<div class="container">水平、垂直居中布局</div>

3.4、Flex布局

优点：不需要知道宽高
缺点：相对于父容器定位，兼容性不好

.container {
    /* ---容器盒子水平、垂直居中对齐--- */
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;


    width: 200px;
    height: 100px;


    background: #d5eeeb;
}
.child {
    background: #f6e5dd;
    height: 50px;
    width: 100px;
}
<div class="container">
    <div class="child">水平、垂直居中布局</div>
</div