如何居中form表单

本文将详细介绍如何在网页中居中form表单，希望对小伙伴们有所帮助。

一、使用flex布局居中form表单

使用flex布局是一种简单且优雅的方式来居中form表单。

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

使用flex布局需要将form表单放置在一个容器里，然后将容器的display属性设置为flex，justify-content属性设置为center，align-items属性设置为center即可。

二、使用绝对定位居中form表单

使用绝对定位也是居中form表单的常用方式。

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

使用绝对定位需要将form表单放置在一个容器里，然后将容器的position属性设置为relative，将form表单的position属性设置为absolute，然后将top属性设置为50%，left属性设置为50%，最后使用transform属性将其移动到中心位置。

三、使用表格布局居中form表单

使用表格布局也是一种可行的方式来居中form表单。

使用表格布局需要将form表单放置在一个单元格里，将单元格的align属性设置为center即可。

四、使用flexboxgrid居中form表单

使用flexboxgrid是一种方便快捷的方式来居中form表单。

使用flexboxgrid需要将form表单放置在一个包含了row和col的结构中，然后使用center-xs、center-sm、center-md、center-lg这些class使其居中，同时引入flexboxgrid.min.css文件。

五、使用Bootstrap居中form表单

使用Bootstrap也是一种方便快捷的方式来居中form表单。

使用Bootstrap需要将form表单放置在一个d-flex和justify-content-center这两个class的容器里，同时引入bootstrap.min.css文件。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com