CSS实现元素水平垂直居中的各种方法

渡江客
160 阅读3分钟

CSS实现元素水平垂直居中的各种方法

前言

        在设计网页页面的过程中，总会有将元素或者文字进行水平或者垂直居中的要求，各种CSS样式调整，搞的头都大了。这里将会介绍 CSS 中几种常用到的水平垂直居中的方法，希望能够对你有所帮助。

全局居中效果图

image.png

一、flex布局设置居中

目前常见的一种方式就是使用flex布局设置居中。

利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式

给容器设置：

  • display: flex;写在父元素上这就是定义了一个伸缩容器
  • justify-content 主轴对齐方式，默认是横轴
  • align-items 纵轴对齐方式，默认是纵轴

优点： 简单、方便、快速，三行代码搞定。

 <div class="box">
    <div class="child">
        水平垂直居中
    </div>
</div>

.box {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    /* 主轴对齐方式，默认是横轴 */
    align-items: center;
    /* 纵轴对齐方式，默认是纵轴 */
}

.child {
    border: 1px solid blue;
}

二、flex-给子元素设置

这种方法主要就是子元素使用maring:auto来进行垂直居中

<div class="box1">
    <div class="child1">水平垂直居中</div>
</div>

.box1{
    width: 100px;
    height: 100px;
    display: flex;
    border: 1px solid red;
}
.child1{
    margin: auto;
    border: 1px solid blue;
}

三、使用绝对定位

使用绝对定位，首先需要将父元素设置为relative，

position:relative日常应用的时候一般是设置给position:absolute;的父层的,父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素.

对此，为实现垂直居中，可以使用css3新增的transform，transform的translate属性也可以设置百分比，其是相对于自身的宽和高，所以可以将translate设置为-50%，就可以做到居中了，代码如下

 <div class="box2">
    <div class="child2">水平垂直居中</div>
</div>

.box2{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    position: relative;

}
.child2{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border: 1px solid blue;
}

四、table-cell实现

display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性，IE6/7不支持（可用其他方法实现类似效果）。同样，display：table-cell属性也会被float，position：absolute等属性破坏效果，应避免同时使用。

<div class="box3">
    <div class="child3">水平垂直居中</div>
</div>

.box3{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    display: table-cell;
    vertical-align: middle; 
    /* 设置元素在垂直方向上的对齐方式 */
    text-align: center;
}
.child3{
    display: inline-block;
    border: 1px solid blue;
}

五、grid布局设置居中

该方法与设置flex布局方法相似一样，但是兼容性较差，不建议使用

<div class="box4">
    <div class="child4">水平垂直居中</div>
</div>

.box4{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    display: grid;
    justify-content: center;
    align-items: center;
}
.child4{
    border: 1px solid blue;
}

六、grid给子元素设置

同理，与flex布局一样，但是兼容性较差，不建议使用

<div class="box5">
    <div class="child5">水平垂直居中</div>
</div>

.box5{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    display: grid;
}
.child5{
    margin: auto;
    border: 1px solid blue;
}

七、给容器加伪元素设置

该方法较为繁琐，更推荐给文本设置居中的时候使用

 <div class="box6">
    <div class="child6">水平垂直居中</div>
</div>

.box6{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    text-align: center;
}
.box6::after{
    content: '';
    line-height: 100px;
}
.child6{
    display: inline-block;
    border: 1px solid blue;
}

以上就是我们常用的几种水平垂直居中方法，希望对大家有所帮助！
参考链接：https://juejin.cn/post/7119133627568357384\
avatar
文章
阅读
粉丝