CSS元素水平垂直居中的方法

文章目录

  • 实现方式
    • 1.利用定位+margin:auto
    • 2.利用定位+margin:负值
    • 3.利用定位+transform
    • 4.table布局
    • 5.flex弹性布局
    • 6.grid网格布局

实现方式

1.利用定位+margin:auto

style>
    .father{
        width:500px;
        height:300px;
        border:1px solid #0a3b98;
        position: relative;
    }
    .son{
        width:100px;
        height:40px;
        background: #f0a238;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

父级设置为相对定位,子级绝对定位 ,并且四个定位属性的值都设置了0,那么这时候如果子级没有设置宽高,则会被拉开到和父级一样宽高
这里子元素设置了宽高,所以宽高会按照我们的设置来显示,但是实际上子级的虚拟占位已经撑满了整个父级,这时候再给它一个margin:auto它就可以上下左右都居中了

2.利用定位+margin:负值

绝大多数情况下,设置父元素为相对定位, 子元素移动自身50%实现水平垂直居中

<style>
    .father {
        position: relative;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left:-50px;
        margin-top:-50px;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

整个实现思路如下图所示:
CSS元素水平垂直居中的方法_第1张图片

  1. 初始位置为方块1的位置
  2. 当设置left、top为50%的时候,内部子元素为方块2的位置
  3. 设置margin为负数时,使内部子元素到方块3的位置,即中间位置

3.利用定位+transform

<style>
    .father {
        position: relative;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

translate(-50%, -50%)将会将元素位移自己宽度和高度的-50%

这种方法其实和最上面被否定掉的margin负值用法一样,可以说是margin负值的替代方案,并不需要知道自身元素的宽高

4.table布局

设置父元素为display:table-cell,子元素设置 display: inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中

<style>
    .father {
        display: table-cell;
        width: 200px;
        height: 200px;
        background: skyblue;
        vertical-align: middle;
        text-align: center;
    }
    .son {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

5.flex弹性布局

<style>
    .father {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

css3中了flex布局,可以非常简单实现垂直水平居中

这里可以简单看看flex布局的关键属性作用:

  • display: flex时,表示该容器内部的元素将按照flex进行布局
  • align-items: center表示这些元素将相对于本容器水平居中
  • justify-content: center也是同样的道理垂直居中

6.grid网格布局

<style>
    .father {
            display: grid;
            align-items:center;
            justify-content: center;
            width: 200px;
            height: 200px;
            background: skyblue;

        }
        .son {
            width: 10px;
            height: 10px;
            border: 1px solid red
        }
</style>
<div class="father">
    <div class="son"></div>
</div>

这里看到,gird网格布局和flex弹性布局都简单粗暴

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