div div居中

css设置div居中的方法有哪些

小亿
92
2023-07-19 17:45:01
栏目: 编程语言
前端开发者专用服务器,限时0元免费领! 查看>>

  1. 使用margin属性设置左右外边距为auto,上下外边距为0。
div {
margin: 0 auto;
}
  1. 使用flex布局,将父元素的display属性设置为flex,然后使用justify-content和align-items属性将子元素居中。
div {
display: flex;
justify-content: center;
align-items: center;
}
  1. 使用absolute定位,将左右外边距设置为auto,上下外边距设置为0,然后将left和right属性设置为0,将top和bottom属性设置为0。
div {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
  1. 使用grid布局,将父元素的display属性设置为grid,然后使用justify-items和align-items属性将子元素居中。
div {
display: grid;
justify-items: center;
align-items: center;
}

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

相关推荐:css div居中的方法有哪些

0
看了该问题的人还看了