码匠编程：CSS让元素绝对居中，你知道几种方法？

最新推荐文章于 2023-09-02 16:38:22 发布

一只有头发的程序猿

最新推荐文章于 2023-09-02 16:38:22 发布

阅读量499

点赞数

分类专栏：工作学习文章标签：编程语言 web前端开发零基础 CSS 码匠编程

原文链接：https://juejin.im/post/6889642079283052558

版权

工作学习专栏收录该内容

97 篇文章 0 订阅

订阅专栏

经常碰到有同学在问，如何让一个元素上下左右都居中呢？相信大家在面试的时候也会经常碰到这个问题，一下列出来几种方式以供大家参考，如有不足之处，请大家补充

问题描述：
给定两个元素，这两个元素是父子级关系。并且两个元素的大小都是不确定的，那么这时候如何让子级在父级中上下左右都居中？（暂且设定父级比子级要大一些）

第一种：利用定位
先上代码及效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            width:500px;
            height:300px;
            border:1px solid #0a3b98;
            position: relative;
        }
        .box{
            width:100px;
            height:40px;
            background: #f0a238;
            position: absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            margin:auto;
        }
    </style>
</head>
<body>
 
<div class="content">
    <div class="box"></div>
</div>
 
</body>
</html>

在这里插入图片描述

思路解析：
父级相对定位，子级绝对定位而四个定位属性的值都设置了0，那么这时候如果子级没有设置宽高，则会被拉开到和父级一样宽高。而现在设置了子级的宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个margin：auto它就可以上下左右都居中了

第二种，定位配合css3位移
依然直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            width:500px;
            height:300px;
            border:1px solid #0a3b98;
            position: relative;
        }
        .box{
            width:100px;
            height:40px;
            background: #f0a238;
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
 
<div class="content">
    <div class="box"></div>
</div>
 
</body>
</html>

CSS让元素绝对居中，你知道几种方法？
思路：
父级相对定位，子级绝对定位，而top，left这两个属性的如果给百分比，那么这个百分比则是相对于父级的宽高来进行计算的，如果只给定这两个值，则子级的右上角会和父级的中心点对齐，得到下图：

CSS让元素绝对居中，你知道几种方法？
这时候则需要进一步操作：css3中的位移属性，则是根据自身来计算百分比的，所以只需要利用这个属性把自身再往左上角各移动50%就可以让子级在父级中上下左右都居中了

第三种：利用内联块元素 display:inline-block
代码及效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            width:500px;
            height:300px;
            border:1px solid #0a3b98;
            text-align: center;
        }
        .content:before{
            content: '';
            height:100%;
            width:0;
            display: inline-block;
            vertical-align: middle;
        }
        .box{
            width:100px;
            height:40px;
            background: #f0a238;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>
<body>
 
<div class="content">
    <div class="box"></div>
</div>
 
</body>
</html>

结果我感觉就不用再看了，大家可以复制代码自己尝试

思路：
首先，把子级转换成内联块元素，那么左右居中就可以直接利用text-align:center搞定了，而这个方法难点就在上下居中上。子级是一个内联块元素，当然不可能说给父级设置一个行高子级就乖乖的上下居中了。所以需要更加复杂的操作：

首先给子级设置垂直对齐方式：vartical-align
它有这么些值：top,baseline,bottom,middle等等我想这些值的意思就不需要我解释了。

CSS让元素绝对居中，你知道几种方法？
但是这个属性有一个缺点：需要一个参照物，也就是说如果父级里面有两个子元素，两个子元素都设置了vertical-align:middle，那么得到的效果只是这两个元素之间居中对齐而已。并不会把两个子元素都放在父级的中间。

这时候，小技巧来了

小技巧一：把其中一个元素设置高度百分百，那么这时候另一个元素就会处于父级上下居中的位置了，
如图：

CSS让元素绝对居中，你知道几种方法？
但是这时候就多出来了一个元素了，与需求不符。当然了，如果说你在实际布局中，确实有两个元素，并且其中一个元素可以设置为高度百分百的话，这么做是可以的。

小技巧二：想办法把另一个元素消除掉——利用伪元素before，详情请看代码。
tips：其实这时候不用参照元素，给父级设置一个和父级高度一样的行高也是可行的，不过这个原理太复杂，另外这个方法并不会让元素绝对上下居中，这涉及到文字的设计，还会牵扯到浏览器解析文字时的一个关键点：X-line，在这里不做深入探究，有兴趣大家可以试试。

第四种：弹性盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            width:500px;
            height:300px;
            border:1px solid #0a3b98;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box{
            width:100px;
            height:40px;
            background: #f0a238;
        }
    </style>
</head>
<body>
 
<div class="content">
    <div class="box"></div>
</div>
 
</body>
</html>

效果图就不看了吧，思路感觉也没啥可解释的，这都是css3的功劳，没啥技巧，掌握了弹性盒模型就能掌握这个方法，简单粗暴。快去看看弹性盒模型吧，以后我有时间心情好的话再专门写点这方面的东西

CSS让元素绝对居中，你知道几种方法？
第五种：网格布局 Grid

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            width:500px;
            height:300px;
            border:1px solid #0a3b98;
            display: grid;
            justify-content: center;
            align-items: center;
        }
        .box{
            width:100px;
            height:40px;
            background: #f0a238;
        }
    </style>
</head>
<body>
 
<div class="content">
    <div class="box"></div>
</div>
 
</body>
</html>

这个方法和弹性盒模型一样，简单粗暴，没啥可说的。grid这玩意很强大，大家有时间可以了解一下。Good Luck ！

一只有头发的程序猿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
码匠编程：CSS让元素绝对居中，你知道几种方法？

经常碰到有同学在问，如何让一个元素上下左右都居中呢？相信大家在面试的时候也会经常碰到这个问题，一下列出来几种方式以供大家参考，如有不足之处，请大家补充问题描述：给定两个元素，这两个元素是父子级关系。并且两个元素的大小都是不确定的，那么这时候如何让子级在父级中上下左右都居中？（暂且设定父级比子级要大一些）第一种：利用定位先上代码及效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UT
复制链接

扫一扫