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

学习笔记(一)

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


文章目录

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


前言

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

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

一、绝对定位法

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

1.方法一

在绝对定位下,top bottom left right四个值都为 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;
    }

效果展示:
div水平垂直居中的七种方法_第1张图片

2.方法二

这种方法可以直接不用管盒子宽高具体数值,在绝对定位下,top left 都设为 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.方法三

这种方法和方法二差不多,但是前提是得知道子盒子宽高的具体数值。
在绝对定位下,left top 都设为 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水平垂直居中的七种方法啦!

多总结,多积累

你可能感兴趣的:(css,css3,html,前端)