css令元素水平居中的方法

当父元素是行内元素时，是不需要子元素居中的。或者使用display:block属性把父元素变为块级元素，再做居中。

 

行内元素的水平居中

（1）在父元素上设置text-align:center即可。

来看一下text-align属性：

text-align：text-align 属性规定元素中的文本的水平对齐方式。该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。

取值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

注意：inline-block元素的水平居中也是在父元素上设置text-align:center。

块级元素的水平居中：

（1）在元素本身上使用margin:0 auto。

<style>
    .child{
        margin:0 auto;
        width: 50%;
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>

 

（2）使用定位属性position。将父元素设置为position:relative，子元素设置：position:absolute; left:50%; transform: translateX(-50%)，即可将子元素水平居中。

<style>
    .parent{
        position:relative;
        height: 100px;
    }
    .child{
        position:absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 50%;
        height: 50px;
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>

（3）使用flex布局。只需要在父元素上设置：display: flex; justify-content: center;

<style>
    .parent{
        display:flex;
        justify-content:center;
        height:100px;
    }
    .child{
        width: 50%;
        height: 50px;
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>

注意浏览器兼容性。 

（4）使用grid布局 。

参考文章：

---

https://blog.csdn.net/weixin_37580235/article/details/82317240

https://www.w3school.com.cn/cssref/pr_text_text-align.asp