css系列—水平垂直左右居中-白红宇的个人博客

发布日期：2021-05-06 19:38:18 浏览次数：13 分类：原创文章

本文共 632 字，大约阅读时间需要 2 分钟。

    水平居中：定位法

        1.父元素上设置display:flex

        2.子元素元素上设置margin: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>Document</title></head><style>.md-warp{	width: 400px;	height: 300px;	border: 1px solid #000;}.md-main{	display: block;	width: 100px;	height: 100px;	background: #f00;}.md-warp{	display: flex}.md-main{	margin:	auto}</style><body>	<div class="md-warp">		<span class="md-main"></span>	</div>	<script>		/**		水平居中：定位法		1.父元素上设置display:flex		2.子元素元素上设置margin:auto。		 */	</script></body></html>

上一篇：vue酷狗音乐实战开发—1-酷狗音乐的需求，路由设计和mint-ui安装

下一篇：css系列—垂直居中总结

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章