css 元素左右居中总结

最新推荐文章于 2024-07-03 09:48:27 发布

weixin_33828101

最新推荐文章于 2024-07-03 09:48:27 发布

阅读量1.3k

点赞数 2

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

版权

在日常开发中，经常会遇见居中显示的场景，今天我们来总结几种。

首先常见的是文字居中，当元素内部有文字是，想让文字居中显示，一般当前元素为块元素使用text-align即可解决

<div>
    <p>居中显示文字</p>
</div>
<style>
div p{
    text-align: center
}
</style>
复制代码

如果是行内元素，在父级使用text-align可以达到同样的效果

<body>
    <div>
        <span>居中显示文字</span>
    </div>
</body>
<style>
div{
    text-align: center
}
</style>
复制代码

块元素居中，内部没有文字,宽高一定，使用margin的特性，左右auto可以达到效果

<body>
    <div></div>
</body>
<style>
    div{
        width: 100px;
        margin: 0 auto;
        background-color: #f00;
        height: 20px;
    }
</style>
复制代码

使用position，宽度已知,根据定位left的50%，可以把元素定在中间，由于css的判定是从元素的左边算起，所以使用margin-left -width/2可以修正元素显示偏移

div{
    width: 100px;
    background-color: #f00;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -50px;
}
复制代码

使用position，如果宽度不能确定

div{
    width: 100px;
    height: 50px;
    background-color: #f00;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
}
复制代码

使用flex justify-content

<body>
    <div>
        <span>显示元素</span>
    </div>
</body>
<style>
    div{
        display: flex;
        justify-content: center;
    }
</style>
复制代码

flex 使用align-item,align-item本来是上下居中的，这里我们使用flex-direction改变元素排列为上下

div{
    display: flex;
    flex-direction: column;
    align-items: center;
}
复制代码

使用display:table

<body>
    <div>
        <p>显示元素</p>
    </div>
</body>
<style>
    div{
        display: table;
        width: 100%;
        text-align: center;
    }
</style>
复制代码