css当元素没有宽高时水平垂直居中，行内元素居中，不同寻常的居中办法

最新推荐文章于 2023-03-21 11:02:24 发布

Chris__Wang

最新推荐文章于 2023-03-21 11:02:24 发布

阅读量739

点赞数 1

分类专栏：个人总结文章标签：水平垂直居中css 没有固定宽高水平垂直居中 css代码居中行内元素居中

本文链接：https://blog.csdn.net/Chris__wang/article/details/90239546

版权

个人总结专栏收录该内容

78 篇文章 1 订阅

订阅专栏

对于css中元素水平垂直居中的方法也有很多

1. 有对固定宽高元素进行水平垂直居中的

2.也有对不固定宽高的元素进行水平垂直居中

代码如下

        .son {
            position: absolute;
            background: green;
            margin:auto;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
        }

上面两种办法网上很多，这里就不详细介绍了

但是不管怎么做，都需要被居中元素有实际宽高，假如我们要居中的元素是行内元素，如span标签，水平居中可以用text-align:center; 但是垂直居中还是没办法，使用上面代码会让行内元素与他的父元素一样宽高

下面介绍一下css中另一个属性，直接上完整代码【感觉有用的给个赞，谢谢】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin:0;
            padding: 0;
        }
        .box {
            width: 1200px;
            height: 800px;
            background: pink;
            margin:0 auto;
            /* 下面为水平垂直居中代码 */
            display:box;
            box-pack:center;
            box-align:center;

            display:-moz-box;
            -moz-box-pack:center;
            -moz-box-align:center;

            display:-webkit-box;
            -webkit-box-pack:center;
            -webkit-box-align:center;
        }
        .son {
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <span class="son">
           你好，我是子元素
        </span>
    </div>
</body>
</html>