不定宽高的水平垂直居中

最新推荐文章于 2021-02-20 16:18:02 发布

周运金

最新推荐文章于 2021-02-20 16:18:02 发布

阅读量896

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/qq_27552077/article/details/78043023

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

经常遇到不定宽高水平垂直居中的问题，下面来说一下主要的两种方法

一、使用CSS3 transform
直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不定宽高水平垂直居中</title>
    <style type="text/css">
        .wrap{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            position: relative;
        }
        .center{
            width: 100px;
            height: 100px;
            background: green;
            position: absolute;
            top:50%;
            left: 50%;
            -webkit-transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class = "wrap">
        <div class = "center">

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

效果：
这里写图片描述

主要步骤：
1、让居中块绝对定位（父块必须声明一下relative）
2、top:50%；left:50%会让居中块的左上角处于负块的中心位置，那么接下来让居中块的中心位置移到左上角的位置就好了
3、使用transform的2D转化就可以了，具体是-webkit-transform: translate(-50%,-50%);两个为负值所以往左上角移动，移动多少？那就是居中块本身长度和高度的一半；

二、flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不定宽高水平垂直居中</title>
    <style type="text/css">
        .wrap{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            display: flex;
            justify-content:center;
            align-items:center;
        }
        .center{
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
    <div class = "wrap">
        <div class = "center">

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

效果：
这里写图片描述

步骤：
这个最简单的方式，使用的是flex布局中的justify-content（主轴方向）、align-items(垂直主轴方向)均居中即可

具体flex布局在这里有详细资料：
http://www.runoob.com/w3cnote/flex-grammar.html

周运金

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
不定宽高的水平垂直居中

经常遇到不定宽高水平垂直居中的问题，下面来说一下主要的两种方法一、使用CSS3 transform 直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>不定宽高水平垂直居中</title> <style type="text/css"> .wrap{
复制链接

扫一扫

专栏目录