关于CSS布局技巧的总结分享

程序员文章站 2022-04-19 10:07:21

...

单列布局

水平居中

父元素text-align:center;子元素：inline-block;

优点：兼容性好；

不足：需要同时设置子元素和父元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平居中1</title>
<style>
    .parent {
        width: 500px;
        height: 400px;
        background: red;
        text-align: center;
    }
    .child {
        display: inline-block;
        width: 300px;
        height: 100px;
        background: blue;
    }
</style>
</head>
<body>
<p class="parent">
    <p class="child"></p>
</p>
</body>
</html>

子元素margin:0 auto;

优点：兼容性好
缺点：需要指定宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <p class="parent">
        <p class="child"></p>
    </p>
</body>
</html>

子元素{display:table;margin:0 auto;}

优点:只需要对自身进行设置
不足:IE6,7需要调整结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            margin:0 auto;
            display:table;margin:0 auto;s
        }
    </style>
</head>
<body>
    <p class="parent">
        <p class="child"></p>
    </p>
</body>
</html>

父元素：relative；子元素：absolute；left:50%;margin-left:-宽度的一半

优点：兼容性好
缺点：需要知道子元素的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            position: relative;
            top: 0;
            left: 0;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -150px;
        }
    </style>
</head>
<body>
    <p class="parent">
        <p class="child"></p>
    </p>
</body>
</html>

父元素：relative；子元素：absolute；left:50%;transform:translate(-50%,0);

优点：兼容性差
缺点：不需要知道子元素的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            position: relative;
            top: 0;
            left: 0;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%,0);
        }
    </style>
</head>
<body>
    <p class="parent">
        <p class="child"></p>
    </p>
</body>
</html>

弹性盒子：父元素：display:flex;justify-content:center;

优点：简单

缺点：兼容性差

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平居中1</title>
<style>
    .parent {
        width: 500px;
        height: 400px;
        background: red;
        display: flex;
        justify-content: center;
    }
    .child {
        width: 300px;
        height: 100px;
        background: blue;
    }
</style>
</head>
<body>
<p class="parent">
    <p class="child"></p>
</p>
</body>
</html>

垂直居中

vertical-align:center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            display:table-cell;
            vertical-align:middle;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <p class="parent">
        <p class="child"></p>
    </p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            vertical-align:middle;
            line-height:450px;            
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            display:inline-block;
        }
    </style>
</head>
<body>
    <p class="parent">
        <p class="child"></p>
    </p>
</body>
</html>
<!-- 这种方法需要知道父元素和子元素的高度，父元素的line-height的值为父元素高度减去子元素高度的一半。-->

父元素：position:relative;子元素：positon:absolute;top:50%;transform:translate(0,-50%);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            position: relative;
            top: 0;
            left: 0;          
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            position: absolute;
            top: 50%;
            left:0;
            transform: translate(0,-50%);
        }
    </style>
</head>
<body>
    <p class="parent">
        <p class="child"></p>
    </p>
</body>
</html>

父元素：position:relative;子元素：positon:absolute;top:50%;margin-top:-子元素高度的一半;
父元素：display:flex;align-items:center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            display: flex;
            align-items: center;        
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <p class="parent">
        <p class="child"></p>
    </p>
</body>
</html>

水平垂直居中

父元素：display:table-cell;vertical-align:middle;text-align:center;
子元素；display:inline-block;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            display:table-cell;
            vertical-align:middle;
            text-align:center; 
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <p class="parent">
        <p class="child"></p>
    </p>
</body>
</html>

父元素：position:relative;
子元素：position:absolute

以上就是关于CSS布局技巧的总结分享的详细内容，更多请关注其它相关文章！

关于CSS布局技巧的总结分享

单列布局

水平居中

垂直居中

水平垂直居中

分享CSS中的关于position:relative;有什么作用？

CSS3阴影 box-shadow的使用和技巧总结_html/css_WEB-ITnose

做网页中需要掌握的八个CSS布局技巧

布局用CSS+DIV的优点总结

Android中关于相对布局RelativeLayout的技巧汇总

Android中关于CoordinatorLayout的一些实用布局技巧

详解CSS3阴影 box-shadow的使用和技巧总结

Android中关于CoordinatorLayout的一些实用布局技巧

使用CSS3实现多列布局与多背景的技巧

关于瀑布流的布局原理分析（纯CSS瀑布流与JS瀑布流）