css 元素左右居中总结

作者: hengking | 来源:发表于2019-04-07 22:44 被阅读0次

css 元素左右居中总结
无标题文章
CSS居中小结
垂直居中的方法
垂直居中，水平居中
CSS
垂直居中的这点事
CSS居中的方法总结
什么鬼？我只是想居中而已！！！
css 水平垂直居中实现方式

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

首先常见的是文字居中，当元素内部有文字是，想让文字居中显示，一般当前元素为块元素使用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>

Snipaste_2019-04-07_22-14-52.png

使用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;
}

Snipaste_2019-04-07_22-24-31.png

使用flex justify-content

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

Snipaste_2019-04-07_22-28-02.png

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>