[分享]css元素的水平垂直居中

在设计网页样式时，经常会遇到需要将某个元素水平或垂直居中的情况，而CSS中提供了几种方法来实现这个目标。一、使用margindiv{ : absolute; top: 50; left: 50; ma...

在设计网页样式时，经常会遇到需要将某个元素水平或垂直居中的情况，而CSS中提供了几种方法来实现这个目标。

一、使用margin

div{
   position: absolute;
   top: 50%;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, -50%);
} 

这个方法基于绝对定位和负外边距的理念，我们先将元素定位在页面的50%宽度和50%高度的位置，然后通过负外边距将元素拉回到较小的宽度和高度。最终使用transform属性将元素移动到它真正的中心点。

二、使用flexbox

.container{
   display: flex;
   justify-content: center;
   align-items: center;
} 

在容器上应用flexbox，然后使用justify-content和align-items属性为子元素水平和垂直居中。

三、使用grid

.container{
   display: grid;
   place-items: center;
} 

在格子布局上应用place-items:center属性即可。