Css水平垂直居中-flex、margin实现，简单高效

qq_33422122

于 2023-07-04 13:01:55 发布

阅读量112

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_33422122/article/details/131532714

版权

今天发现了一个比较简单的水平垂直居中的方法，具体思路如下：

1、将父元素设置一个宽度、高度，display设置为flex；

2、将子元素margin设置为auto；

demo代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box {
            width: 100px; 
            height:100px;
            display: flex; 
            background: gray;   /*非必须-仅为了区分父子模块*/
        }

        .child {
        	width:50px; 
        	height:50px; 
        	margin:auto; 
        	background: green;   /*非必须-仅为了区分父子模块*/
        }
    </style>
</head>
<body>

	<div class="box">
		<div class="child"></div>
	</div>

</body>
</html>