css之div内容居中

欢迎大家来到IT世界,在知识的湖畔探索吧!

div中的内容居中显示，包括水平和垂直2个方向。

<html>
<head>
    <style type="text/css">
        .box{
            height:400px;
            width:600px;
            background-color: #f2dede;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
<div class="box">
    <div style="background-color: #00a4e6">居中</div>
    <div style="background-color: #00b33c">居中</div>
</div>
</body>
</html>

欢迎大家来到IT世界,在知识的湖畔探索吧!

说明：

align-items:center，控制垂直方向

justify-content:center，控制水平方向

弹性布局介绍：

Flex 弹性盒子布局是很强大的布局，它可以很方便的控制元素在垂直和水平方向上的行为。

使用display:flex

主轴和交叉轴

容器存在两个轴，水平叫主轴（Main-Axis），垂直叫交叉轴（Cross-Axis）。主轴左边是开始位置（main start）右边是结束位置（main end），交叉轴上是开始位置（cross start）下是结束位置（cross end）。用 justify 属性控制主轴项目的空隙，使用 align 属性控制交叉轴项目之间的垂直行为。

容器一共有 6 个属性：

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

#记录我的2024#

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/109018.html