css实现居中的方法

水平居中

1. 行内设置text-align

给父元素设置text-align为center,一般用于实现文字水平居中

2. 给当前元素设置margin:0 auto

原理:块级独占一行,表现为在水平方向上占满整个父容器,当水平方向padding,border,width成定值时,margin左右为auto,默认margin左右平分剩余空间

html 复制代码
<head>
    <style>
        .content{
            width: 600px;
            height: 300px;
            border: 1px solid #000;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: darkcyan;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="box"></div>
    </div>
</body>

但是当该元素设置了position为absolute时,需要加上left为0,right为0才能使margin:0 auto生效,让元素左右边界都紧贴其包含块的边缘。

html 复制代码
.box{
    width: 200px;
    height: 200px;
    background-color: darkcyan;
    margin: 0 auto;
    left: 0;
    right: 0;
    position: absolute;
}

3. justify-content

父元素设置display为flex布局,justify-content为center,设置盒子在主轴的对齐方式为center

html 复制代码
.content{
   width: 600px;
   height: 300px;
   border: 1px solid #000;
   display: flex;
   justify-content: center;
}

4. transform + position

父元素设置relative,子元素设置absolute,left为50%,距离左边偏移父元素50%,transform为translateX(-50%),向左平移自身宽度的50%

5. margin-left + position

与transform类似,只是margin-left为负的自身宽度的一半

当未知宽高时用transform,已知宽高可以用margin-left

垂直居中

1. 单行文本可以设置line-height

设置line-height与height相等

一般用于文字垂直居中

2. align-items

父元素设置flex,align-items为center,定义元素在侧轴对齐方式为center

3. transform + position

与水平居中一样,设置top:50%距离上边偏移父元素50%,transform为translateY(-50%)

4. margin-top + position

与水平居中一样,设置top:50%,margin-top:负的自身高度的一半

5. margin:0 auto

子元素设置absolute定位,top为0,bottom为0,margin设置auto

html 复制代码
.box{
    width: 200px;
    height: 100px;
    background-color: darkcyan;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
}

6. table-cell + vertical-align

给父元素设置display为table-cell,vertical-align为middle

整体居中

行内:text-align:center; line-height:height

块级:

  1. flex
html 复制代码
.content{
    width: 400px;
    height: 300px;
    border: 1px solid #000;
    display: flex;
    justify-content: center; /*水平居中*/
    align-items: center;  /*垂直居中*/
}
  1. transform
html 复制代码
.content{
    width: 400px;
    height: 300px;
    border: 1px solid #000;
    position: relative;
}
.box{
    width: 200px;
    height: 100px;
    background-color: darkcyan;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}
  1. margin
html 复制代码
.content{
    width: 400px;
    height: 300px;
    border: 1px solid #000;
    position: relative;
}
.box{
    width: 200px;
    height: 100px;
    background-color: darkcyan;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
}
相关推荐
浩浩测试一下7 分钟前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构
西陵33 分钟前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构
小磊哥er43 分钟前
【前端工程化】前端工作中的业务规范有哪些
前端
ᥬ 小月亮1 小时前
webpack基础
前端·webpack
YongGit1 小时前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士2 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea2 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia3 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js