使用FLEX进行元素居中布局以及关于FLEX的小知识点

最新推荐文章于 2024-04-16 10:29:00 发布

Immortal_W

最新推荐文章于 2024-04-16 10:29:00 发布

阅读量316

点赞数

文章标签： CSS

本文链接：https://blog.csdn.net/Immortal_W/article/details/87631987

版权

使用FLEX进行元素居中布局以及关于FLEX的小知识点

关于元素的居中，左右居中还是比较简单的 margin 0 auto 就OK了，但是上下居中真是有点难到小编了，以前使用的都是布局 top 50% 然后再往回减盒子高度，虽然能够实现居中布局，但是如果盒子大小不定，那么就需要经常的进行计算，很不是方便，最近看视频的时候发现了这个好玩的属性，接下来就来介绍一下吧。

flex布局仅仅需要三行代码即可实现元素的上下左右居中对齐：

display: flex;
justify-content: center;
align-items: center;

多说无益上代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            display: flex;
            justify-content: center;
            align-items: center;   
            /*justify-content: flex-start;*/  /*默认居左*/

最低0.47元/天解锁文章

Immortal_W

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用FLEX进行元素居中布局以及关于FLEX的小知识点

使用FLEX进行元素居中布局以及关于FLEX的小知识点关于元素的居中，左右居中还是比较简单的 margin 0 auto 就OK了，但是上下居中真是有点难到小编了，以前使用的都是布局 top 50% 然后再往回减盒子高度，虽然能够实现居中布局，但是如果盒子大小不定，那么就需要经常的进行计算，很不是方便，最近看视频的时候发现了这个好玩的属性，接下来就来介绍一下吧。flex布局仅仅需要三行代码即...
复制链接

扫一扫