《这9种垂直水平居中的方式你肯定不知道》
回复数(0) 浏览数(48)
{{topic.upvote_count || 0}} 编辑 回复

前端开发中,我们经常需要对元素进行水平垂直居中。为此,我特地总结了让元素居中的九种方法。

一、使用grid布局实现居中(一)

html代码

    <div class="box">
    <p>hello</p>
    </div>

CSS代码

.box {
    width: 200px;
    height: 200px;
    border: 1px solid;
    display: grid;
    align-items: center;
    justify-items: center;
}
p {
    background: red;
}

二、使用grid布局实现居中(二)

html代码

    <div class="box">
    <p>hello</p>
    </div>

CSS代码

.box {
    width: 200px;
    height: 200px;
    border: 1px solid;
    display: grid;
    align-items: center;
    justify-content: center;
}
p {
    background: red;
}

三、grid布局配合margin实现居中

html代码

    <div class="box">
    <p>hello</p>
    </div>

CSS代码

.box {
    width: 200px;
    height: 200px;
    border: 1px solid;
    display: grid;
}
p {
    margin:auto;
    background: red;
}

四、flex布局实现居中

html代码

    <div class="box">
    <p>hello</p>
    </div>

CSS代码

.box {
    width: 200px;
    height: 200px;
    border: 1px solid;
    display: flex;
    justify-content:center;
    align-items:center;
}
p {
    background: red;
}

五、flex布局配合margin实现居中

html代码

    <div class="box">
    <p>hello</p>
    </div>

CSS代码

.box {
    width: 200px;
    height: 200px;
    border: 1px solid;
    display: flex;
}
p {
    margin:auto;
    background: red;
}

** 注意: ** 以上几种方式是需要我们牢记掌握的,在以后的工作中会经常使用到的几种居中方式。

六、使用display:table-cell实现居中

html代码

    <div class="box">
    <p>hello</p>
    </div>

CSS代码

.box {
    width: 200px;
    height: 200px;
    border: 1px solid;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
p {
    background: red;
    display: inline-block;
}

七、使用绝对定位实现居中

html代码

    <div class="box">
    <p>hello</p>
    </div>

CSS代码

.box {
    width: 200px;
    height: 200px;
    border: 1px solid;
    position: relative;
}
p {
    position: absolute;
    left: 50%;
    top: 50%;
    transfrom: translate(-50%, -50%);
    margin: 0;
}

八、通过内联元素的特性实现居中

html代码

    <div class="box">
    <p>hello</p>
    </div>

CSS代码

.box {
    width: 200px;
    height: 200px;
    border: 1px solid;
    text-align: center;
}
.box::after {
    content: '';
    line-height: 200px;
}
p {
    display: inline-block;
}

九、通过绝对定位进行居中(已经废弃)

html代码

    <div class="box">
    <p>hello</p>
    </div>

CSS代码

.box {
    width: 200px;
    height: 200px;
    border: 1px solid;
    position: relative;
}
p {
    background: red; 
    width: 100px;   /*必须要设置宽高*/
    height: 40px;   /*必须要设置宽高*/
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

总结

推荐使用flex布局的方式实现居中,既方便,适应性又足够好。

以上就是九种实现垂直水平居中的方法,其中有些方法是需要我们记住并掌握的,有些方法只需要了解一下即可。

参考资料

{{topic.upvote_count || 0}}

前端开发中,我们经常需要对元素进行水平垂直居中。为此,我特地总结了让元素居中的九种方法。

一、使用grid布局实现居中(一)

html代码

    <div class="box">
    <p>hello</p>
    </div>

CSS代码

.box {
    width: 200px;
    height: 200px;
    border: 1px solid;
    display: grid;
    align-items: center;
    justify-items: center;
}
p {
    background: red;
}

二、使用grid布局实现居中(二)

html代码

    <div class="box">
    <p>hello</p>
    </div>

CSS代码

.box {
    width: 200px;
    height: 200px;
    border: 1px solid;
    display: grid;
    align-items: center;
    justify-content: center;
}
p {
    background: red;
}

三、grid布局配合margin实现居中

html代码

    <div class="box">
    <p>hello</p>
    </div>

CSS代码

.box {
    width: 200px;
    height: 200px;
    border: 1px solid;
    display: grid;
}
p {
    margin:auto;
    background: red;
}

四、flex布局实现居中

html代码

    <div class="box">
    <p>hello</p>
    </div>

CSS代码

.box {
    width: 200px;
    height: 200px;
    border: 1px solid;
    display: flex;
    justify-content:center;
    align-items:center;
}
p {
    background: red;
}

五、flex布局配合margin实现居中

html代码

    <div class="box">
    <p>hello</p>
    </div>

CSS代码

.box {
    width: 200px;
    height: 200px;
    border: 1px solid;
    display: flex;
}
p {
    margin:auto;
    background: red;
}

** 注意: ** 以上几种方式是需要我们牢记掌握的,在以后的工作中会经常使用到的几种居中方式。

六、使用display:table-cell实现居中

html代码

    <div class="box">
    <p>hello</p>
    </div>

CSS代码

.box {
    width: 200px;
    height: 200px;
    border: 1px solid;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
p {
    background: red;
    display: inline-block;
}

七、使用绝对定位实现居中

html代码

    <div class="box">
    <p>hello</p>
    </div>

CSS代码

.box {
    width: 200px;
    height: 200px;
    border: 1px solid;
    position: relative;
}
p {
    position: absolute;
    left: 50%;
    top: 50%;
    transfrom: translate(-50%, -50%);
    margin: 0;
}

八、通过内联元素的特性实现居中

html代码

    <div class="box">
    <p>hello</p>
    </div>

CSS代码

.box {
    width: 200px;
    height: 200px;
    border: 1px solid;
    text-align: center;
}
.box::after {
    content: '';
    line-height: 200px;
}
p {
    display: inline-block;
}

九、通过绝对定位进行居中(已经废弃)

html代码

    <div class="box">
    <p>hello</p>
    </div>

CSS代码

.box {
    width: 200px;
    height: 200px;
    border: 1px solid;
    position: relative;
}
p {
    background: red; 
    width: 100px;   /*必须要设置宽高*/
    height: 40px;   /*必须要设置宽高*/
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

总结

推荐使用flex布局的方式实现居中,既方便,适应性又足够好。

以上就是九种实现垂直水平居中的方法,其中有些方法是需要我们记住并掌握的,有些方法只需要了解一下即可。

参考资料

48
回复 编辑