倩女非法错误《html》，用html设置表单在屏幕居中

哎呀，这件事可不简单啊，要用HTML设置表单在屏幕居中，我们需要掌握一些技巧和方法呢。别急，让蒟蒻我给大家详细解说一下吧！

首先，要让表单居中，我们需要使用外部样式表来对表单进行样式设置。这样，我们可以通过CSS代码来实现对表单居中的设置。

其次，有些小可爱可能会问："外部样式表是什么呀？" 嘿嘿，不慌不慌，小编来为大家普及一下： 外部样式表就是将不同页面的样式表放在一个独立的外部.css文件中，并通过HTML文档的链接引用，实现样式与内容的分离，方便管理更加专业哦。 我们先在 HTML 文档的 head 标签中添加以下代码：

```html

```

这里 "href" 属性的值要改成你自己样式表的路径哦！ 路径要写正确啊，不然会找不到导致样式设置失败的呢。

哎呀哎呀，咱们做事得有条不紊，先告诉大家怎么创建样式表。我们可以利用记事本或其他编程软件进行编写。

```css

form {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

```

这段代码是用来设置表单的，其中 "form" 就是类名，大家看到的 "flex"、"justify-content"、"align-items" 这些都是属性，他们的作用是让表单居中。显示方式为Flex，justify-content 用来设置垂直方向的对其方式，align-items 用来设置水平方向的对齐方式，

这里高度设置为 "100vh"，也就是窗口高度。

听说做到这里大家已经可以实现让表单在整个网页屏幕中居中啦！但是，如果表单过长或者内容较多，会导致垂直居中不准确，这时候我们就需要添加一个额外的包裹元素，来对表单内容进行限制。

啊！不要吓坏您，这也不难的。我们需要用到三个嵌套的容器：首先是body，然后是div，最后是form。下面是代码：

```html

```

我们来为 div 添加样式，

```css

.container {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

```

同理，给 form 添加样式同样不变，

```css

form {

display: flex;

justify-content: center;

align-items: center;

max-width: 400px;

width: 80%;

flex-direction: column;

}

```

最后，把样式放在外部样式表中，我们就可以愉快的让页面中的表单居中喽！

总结一下，要让表单在屏幕中居中，我们可以缩小表单的宽度，让内容左右两侧留出相等的空白区域，也可以限制表单的高度，并实现垂直居中。小编相信，经过大家的学习，这个技能大家都已经掌握了，快去实践吧！ 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/