不定宽高的水平垂直居中

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

一、使用CSS3 transform
直接上代码


<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张图片

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

二、flex布局


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

效果:
不定宽高的水平垂直居中_第2张图片

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

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

你可能感兴趣的:(css)