你还在为居中而烦恼吗,水平居中多个元素、创建响应式布局、垂直和水平同时居中内容。它,display: flex 和 justify-content: center 都可以完成!
display: flex:将元素定义为flex容器
justify-content:定义项目在主轴上的对齐方式
例1:导航菜单居中
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>nav ul {display: flex;justify-content: center;list-style-type: none;padding: 0;}nav li {font-size: 16px;margin: 0 10px;}</style>
</head>
<body><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于</a></li><li><a href="#">联系</a></li></ul></nav>
</body>
</html>
例2: 图片和文字并排居中
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {display: flex;justify-content: center;align-items: center;}.container img {margin-right: 10px;width: 30px;height: 30px;}</style>
</head>
<body><div class="container"><img src="../../Web/static/img/LA.png" alt="Logo"><h1>公司名称</h1></div>
</body>
</html>
例3:多个块级元素居中
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.features {display: flex;justify-content: center;flex-wrap: wrap;}.feature {margin: 10px;padding: 20px;background-color: #f0f0f0;}</style>
</head>
<body><div class="features"><div class="feature">功能1</div><div class="feature">功能2</div><div class="feature">功能3</div></div>
</body>
</html>
其余属性
容器属性:
display: flex
:将元素定义为flex容器flex-direction
:定义主轴方向(row, column, row-reverse, column-reverse)justify-content
:定义项目在主轴上的对齐方式align-items
:定义项目在交叉轴上的对齐方式flex-wrap
:定义是否允许项目换行
项目属性:
flex-grow
:定义项目的放大比例flex-shrink
:定义项目的缩小比例flex-basis
:定义项目在分配多余空间之前的初始大小align-self
:允许单个项目有与其他项目不一样的对齐方式