div水平垂直居中的七种方法

时间：2025-01-20 10:55:37

学习笔记（一）

div水平垂直居中的七种方法

文章目录

  • 学习笔记（一）
  • 前言
  • 一、绝对定位法
    • 1.方法一
    • 2.方法二
    • 3.方法三
    • 4.方法四
  • 二、flex布局法
    • 1.方法五
  • 三、将小div转成行内块
    • 1.方法六
  • 四、网格布局
    • 1.方法七
  • 总结

前言

在写小demo过程中，经常会遇到需要将一个div水平和垂直两个方向同时居中的情况，针对这种情况，我们有几种方法可以实现

提示：以下是本篇文章正文内容，下面案例可供参考

一、绝对定位法

绝对定位方式可分为以下三种方法：

1.方法一

在绝对定位下，topbottomleftright四个值都为 0，margin:auto。

代码如下（实例）：

html:

<div class="box">
    <div class="small"></div>
</div>

css:

	.box{
        width: 500px;
        height: 500px;
        border: 3px solid #f00;
        position: relative; 
        text-align: center;
        line-height: 500px;
    }
    .small{
        width: 100px;
        height: 100px;
        background-color: #00f;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

效果展示：
再等等，图片就要来了

2.方法二

这种方法可以直接不用管盒子宽高具体数值，在绝对定位下，topleft 都设为 50% ，然后用平移的方法向左、向上分别移动小盒子的50% （ transform: translate(-50%, -50%); ）
代码如下（实例）：
（这里html代码一样，我就不多赘述了~）

css:

.small{
        width: 100px;
        height: 100px;
        background-color: #00f;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

3.方法三

这种方法和方法二差不多，但是前提是得知道子盒子宽高的具体数值。
在绝对定位下，lefttop 都设为 50% ，然后用margin的方法，左、上外边距分别为子盒子宽、高的一半像素的负值
代码如下（实例）：
（这里html代码一样，我就不多赘述了~）

css:
这里子盒子宽高都是100px，所以外边距的值为 margin: -50px 0 0 -50px;

.small{
        width: 100px;
        height: 100px;
        background-color: #00f;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -50px 0 0 -50px;
    }

4.方法四

在绝对定位下，利用calc() 函数动态计算实现水平垂直居中
代码如下（示例）：
css
left:calc((400px - 200px)/2);
top:calc((160px - 50px)/2);

.box{
    width: 500px;
    height: 500px;
    border: 3px solid #f00;
    position: relative; 
}

.small{
	width: 100px;
    height: 100px;
    background-color: #00f;
    position: absolute;
    left:calc((500px - 100px)/2);
    top:calc((500px - 100px)/2);
}

二、flex布局法

1.方法五

为子盒子的父级元素添加flex方法

代码如下（示例）：
display: flex;
align-items: center;
justify-content: center;
css:

.box {
    width: 500px;
    height: 500px;
    border: 3px solid #f00;
    display: flex;
    align-items: center;
    justify-content: center;
}

.small {
    width: 100px;
    height: 100px;
    background-color: #00f;
}

三、将小div转成行内块

1.方法六

在小div后，新增span标签，给小盒子设置vertical-align:middle
给大盒子设置line-height为大盒子高度，text-align:center

代码如下（示例）：

html:

<div class="box">
    <div class="small"></div>
    <span></span>
</div>

css:

.box {
    width: 500px;
    height: 500px;
    border: 3px solid #f00;
}

.small{
    width: 100px;
    height: 100px;
    background-color: #00f;
    display: inline-block;
        /* 
            修饰的是行内块
            垂直的对齐方式
            参考谁进行垂直对齐 - 当前行
        */
    vertical-align: middle;
}

四、网格布局

1.方法七

为子盒子的父元素添加 grid 变成网格布局，设置成一行一列的网格，再将其垂直水平居中。

代码如下（示例）：

grid-template-columns: 100px;
grid-template-rows: 100px;
justify-content: center;
align-content: center;
css:

.box {
	width: 300px;
    height: 300px;
    border: 3px solid #f00;
    margin: 200px auto;
    display: grid;
    grid-template-columns: 100px;
    grid-template-rows: 100px;
    /* justify-content: center;
    align-content: center; */
    /* 复合写法  垂直对齐方式  水平对齐方式*/
    place-content: center center;
}

.small {
     width: 98px;
     height: 98px;
     border: 1px solid blue;
}

总结

以上就是如何将小div水平垂直居中的七种方法啦！

多总结，多积累

相关文章