html盒子水平和垂直居中

最新推荐文章于 2023-02-27 09:41:13 发布

转载最新推荐文章于 2023-02-27 09:41:13 发布 · 235 阅读

文章标签：

#php

本文介绍了一个使用Flex布局实现元素水平垂直居中的HTML示例。通过justify-content和align-items属性，可以轻松地使内部div在父容器中居中显示。需要注意的是，不同浏览器对于这些属性的支持情况有所不同。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#main {
    width: 400px;
    height: 150px;
    border: 1px solid #c3c3c3;
    display: flex;
    justify-content: center;
	align-items: center;
}

#main div {
    width: 70px;
    height: 70px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;"></div>
</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 justify-content 属性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-justify-content 属性支持该属性。</p>

</body>
</html>

原文地址：http://www.runoob.com/try/try.php?filename=trycss3_justify-content

关注博主即可阅读全文