CSS中各种居中的问题

最新推荐文章于 2025-05-18 09:07:05 发布

原创最新推荐文章于 2025-05-18 09:07:05 发布 · 219 阅读

1 ·

CC 4.0 BY-SA版权

css及css奇技淫巧专栏收录该内容

15 篇文章

订阅专栏

CSS中各种居中的问题

1.元素水平居中

1.1 在父元素上使用text-align: center;

father {
    text-align: center;  
}

1.2 margin: 0 auto;

在上一个问题中，我们说过，块级元素的特性是自动在宽度上填充父元素，有内容的地方自然是内容，而其余的地方使用margin填充。因此我们可以利用左右相等的margin来使元素居中。

<style type="text/css">
        #container {
            height: 100px;
            background: gray;
        }
        #testDiv1{
            height: 100px;
            margin: 0 auto;
            width: 100px;
            background: black;
        }
</style>
<body>
    <div id="container">
        <div id="testDiv1"></div>
    </div>
</body>

1.3 多个块级元素在一行内居中

众所周知，行级元素不能设置宽高，只能根据内容决定大小，那么想让多个块级矩形居中要怎么做呢？

块级元素独占一行，要怎么才能不独占呢？

可以设置成行内块级 inline-block，然后父元素给text-align：center

<style type="text/css">
        #container {
            text-align: center;
            height: 100px;
            background: gray;
        }
        .mydiv {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: red;
        }
</style>
<body>
    <div id="container">
        <div class="mydiv"></div>
        <div class="mydiv"></div>
        <div class="mydiv"></div>
    </div>
</body>

1.4 设置距离左边50%，再用负margin拉回去

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2.垂直居中

2.1 单行行内元素居中

思路：设置display为inline-block，并给出行高等于元素高度

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: rgb(30, 186, 250);
        }
        /*设置父块大小及颜色*/

        div a {
            text-decoration: none;
            font-size: 25px;
            color: rgb(254, 7, 183);
            font-weight: 700;
            line-height: 200px;
        }
        /*设置内联元素的行高等于父块高度的行高即可实现垂直居中*/
    </style>
</head>

<body>
    <div><a href="#">测试链接</a></div>
</body>

2.2 设置距离父元素50%，再用margin拉回去

<!DOCTYPE html>
<html lang="zh">

<head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            height: 95vh;
        }
        .test{
            height: 100px;
            width: 100px;
            background: red;
            position: absolute;
            top: 50%;
            margin-top: -50px;
        }
    </style>
</head>

<body>
    <div style="height: 600px">
        <div class="test">
            
        </div>
    </div>
</body>

</html>

View Code

若想基于视口的垂直居中可将relative换为absolute

2.3 table-cell + vertical-align:middle

设置父元素display为table-cell，并给vertical-align: middle;

3 我最喜欢的方法，flex布局天下第一！

总结：垂直 + 水平居中示例

需求，在页面最中间显示一个button。

<!DOCTYPE html>
<html lang="zh">

<head>
    <style>
        body {
            height: 100vh;
            margin: 0;
            padding: 0;
            text-align: center;
        }
        /* button {
            
        } */
        span {
            display: inline-block;
            height: 100vh;
            line-height: 100vh;
        }
        a {
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 5%;
            box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <span>
        <a href="">click me</a>
    </span>
</body>

</html>

View Code

效果：