css中不定宽高元素实现垂直水平居中的方法整理

2021-03-09

阅读：94

css中不定宽高元素实现垂直水平居中的方法整理

1.flex布局

主要使用

justify-content 定义主轴上的对齐方式
align-items 定义交叉轴上的对齐方式

代码如下

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content{
            width: 500px;
            height: 200px;
            background: red;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box{
            width: 200px;
            height: 100px;
            background: blue;

        }
    </style>
</head>
<body>
    <div class="content">
        <div class="box">

        </div>
    </div>
</body>
</html>

显示效果

WX20230220-225207

2.position + transform

父元素设相对定位，子元素设绝对定位，距离上边 50%，左边 50%，并且设置 transform: translate(-50%,-50%);

代码如下

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content{
            width: 500px;
            height: 200px;
            background: red;
            position: relative;
        }
        .box{
            width: 200px;
            height: 100px;
            background: blue;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);

        }
    </style>
</head>
<body>
    <div class="content">
        <div class="box">

        </div>
    </div>
</body>
</html>

3.Grid 网格布局

Grid 布局与flex布局有一定的相似性，都可以指定容器内多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定“项目”针对轴线的位置，可以看做是一维布局。Grid布局则是将容器划分成”行“和”列“，产生单元格，然后指定”项目所在“的单元格，可以看做是二维布局。Grid布局远比Flex布局强大。

摘自阮一峰 Grid布局教程

代码如下

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content{
            width: 500px;
            height: 200px;
            background: red;
            display: grid;
        }
        .box{
            width: 200px;
            height: 100px;
            background: blue;
            align-self: center;
            justify-self: center;

        }
    </style>
</head>
<body>
    <div class="content">
        <div class="box">

        </div>

    </div>
</body>
</html>

4.css伪类

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content{
            width: 500px;
            height: 200px;
            background: red;
            text-align: center;
        }
        .content::before{
            display: inline-block;
            vertical-align: middle;
            content: "";
            height: 100%;

        }
        .box{
            width: 200px;
            height: 100px;
            background: blue;
            vertical-align: middle;
            display: inline-block;

        }
    </style>
</head>
<body>
    <div class="content">
        <div class="box">

        </div>

    </div>
</body>
</html>

搜索一下

加入前端e栈