css 居中的几种方案

jefferylong

已于 2022-08-23 17:15:01 修改

阅读量114

点赞数

分类专栏：前端进阶文章标签： css css3 html

于 2022-08-23 16:42:53 首次发布

本文链接：https://blog.csdn.net/jefferylong/article/details/126488175

版权

前端进阶专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在这里插入图片描述
/* 第一种 /

.app {
    width: 200px;
    height: 200px;
    background: lightskyblue;
    display: flex;
    align-items: center;
    justify-content: center;
}
.app>div {
    width: 50px;
    height: 50px;
    background: lightgray;
}

/* 第二种 */

.app {
    width: 200px;
    height: 200px;
    background: lightskyblue;
    position: relative;
}

.app>div {
    width: 50px;
    height: 50px;
    background: lightgray;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

/* 第三种*/

.app {
    width: 200px;
    height: 200px;
    background: lightskyblue;
    position: relative;
}

.app>div {
    width: 50px;
    height: 50px;
    font-size: 20px;
    background: lightgray;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 第四种文字居中*/
在这里插入图片描述

.app{
    width: 200px;
    height: 200px;
    background: lightskyblue;
    line-height: 200px;
    text-align: center;
    
}
.app>div{
    width: 50px;
    font-size: 20px;
    background: lightgray;	
    display: inline;				
}

/* 第五种方案 */

.app {
    width: 200px;
    height: 200px;
    background: lightskyblue;
}

.app>div {
    width: 50px;
    font-size: 20px;
    background: lightgray;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-left: auto;
    margin-right: auto;
}

在这里插入图片描述

/* 第六种文字居中*/

.app{
    width: 200px;
    height: 200px;
    background: lightskyblue;
    display: table;	
    text-align: center;
}
.app>div{
    width: 50px;
    height: 50px;
    font-size: 20px;
    background: lightgray;	
    display: table-cell;
    vertical-align: middle;				
}

/* 第七种方案单行文本居中让文本的父元素的line-height和高度相同*/

.app{
    width: 200px;
    height: 200px;
    background: lightskyblue;		
    text-align: center;
    line-height: 200px;
}
.app>div{
    width: 50px;
    height: 50px;
    font-size: 20px;
    background: lightgray;	
    display: inline;			
}

/* 第八种*/

.app {
    width: 200px;
    height: 200px;
    background: lightskyblue;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app>div {
    width: 50px;
    font-size: 20px;
    background: lightgray;
}