html几种常见的元素水平垂直居中方法

我们在做网页布局的时候经常需要将元素水平或者垂直居中，今天就给大家分享三种常用的水平垂直居中的小方法。

方法一：使用Flexbox（弹性盒子）Flexbox，或称弹性盒子模型，是一种先进的布局方式，它能够让元素在容器内自动伸缩以适应不同的显示空间。要使用Flexbox居中div，你只需要在容器上设置display:flex;，并且使用justify-content:center;和align-items:center；来水平和垂直居中子元素。

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

方法二：使用Grid（网格布局）Grid布局是CSS的另一种强大的布局系统，专门用于二维布局（即同时处理行和列）。要用Grid居中一个元素，首先在容器上设置display:grid;，然后使用place-items:center；即可同时实现水平和垂直居中。

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

方法三：使用AbsolutePositioning（绝对定位)绝对定位是一种传统但非常灵活的居中方法。你可以给div设置position：absolute;，然后使用top：50%;、left:50%;配合transform:translate（-50%，-50%）；来精确地将元素居中。

.container{
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}