当前位置:首页  电脑知识  其它

CSS怎么定位一个Div中心使用Flexbox

CSS怎么定位一个Div中心使用Flexbox

日期:2022-10-01 14:37:45来源:浏览:

在本节中,我们将在页面的中心位置圆使用CSS Flexbox的水平和垂直对齐属性。

方法如下:

.container {  width: 500px;  height: 250px;  margin: 50px;  outline: solid 1px black;  display: flex;  justify-content: center;  align-items: center;}.circle {  width: 50px;  height: 50px;  border-radius: 50%;  background-color: black;}

以下是我们的三行代码添加到容器类上图:

display: flex;justify-content: center;align-items: center;

正如所料,我们首先显示:flex;它允许我们使用Flexbox CSS。我们然后使用justify-content水平对齐,对齐项目(垂直对齐)属性位置圆的中心页面。

css的全称是什么

css的全称是Cascading Style Sheets(层叠样式表),它是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

相关推荐