不定宽高的水平垂直居中

时间 2020-06-23 标签定宽高的水平垂直居中

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

1、使用CSS3 transform
直接上代码css

<!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>

效果：
html

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

2、flex布局svg

<!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

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