首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我正在尝试将表单放在css中页面的中心。我试过不同的路线,但我做不到

将表单放在页面的中心可以使用以下方法:

  1. 使用CSS的Flexbox布局:将表单的父容器设置为display: flex,并且设置justify-content和align-items属性为center,这样表单就会在水平和垂直方向上居中显示。
代码语言:txt
复制
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
  1. 使用CSS的Grid布局:将表单的父容器设置为display: grid,并且设置place-items属性为center,这样表单就会在水平和垂直方向上居中显示。
代码语言:txt
复制
.container {
  display: grid;
  place-items: center;
}
  1. 使用绝对定位和transform属性:将表单的父容器设置为相对定位,然后将表单设置为绝对定位,并且使用transform属性将表单居中。
代码语言:txt
复制
.container {
  position: relative;
}

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

以上是常用的几种方法,根据具体情况选择适合的方法即可。如果你使用腾讯云的云计算服务,可以考虑使用腾讯云的云服务器(CVM)来部署你的网站,并使用腾讯云的云数据库(TencentDB)来存储表单数据。具体产品介绍和链接如下:

  • 腾讯云云服务器(CVM):提供弹性计算能力,可根据业务需求弹性调整服务器配置。产品介绍链接
  • 腾讯云云数据库(TencentDB):提供高性能、可扩展的数据库服务,支持多种数据库引擎。产品介绍链接
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

现代前端开发路线图:从零开始,一步步成为前端工程师

在详细介绍这份路线不同部分之前,先花点时间讲讲免责声明: 这份路线目的是让你了解一下整体情况并且提供指导,如果你对接下来该学什么感到困惑的话。但并不鼓励你用赶时髦心态去学东西。...建议你随便找一个 网站,比如看看Github档案或者Twitter登录。然后把焦点放在恰当地组织内容上。出来东西可能会很难看,但是暂时别担心,把你关注点放在恰当结构上。...在这一步,你将会学习JavaScript基础来为后面的旅程做好准备—— 学习这门语言语法和基本机构。...以下就是一些可以去尝试pull请求: 增强UI,把任何演示做成响应式或者改进设计 看看有什么开放issue是你能够解决 重构任何你认为自己可以改进代码 就像这个repo一样,告诉他们你正在学习让他们就你...选一个框架 在旧路线图中,这个部分往往是紧挨着基础部分,但是这次改到放在Sass、构建工具和包管理器后面了,因为在框架你全都会用上那些东西,如果不具备相应知识的话会吓到你

75360

前端开发路线图——从小白到前端工程师

在详细介绍这份路线不同部分之前,先花点时间讲讲免责声明: 这份路线目的是让你了解一下整体情况并且提供指导,如果你对接下来该学什么感到困惑的话。但并不鼓励你用赶时髦心态去学东西。...建议你随便找一个网站,比如看看Github档案或者Twitter登录。然后把焦点放在恰当地组织内容上。出来东西可能会很难看,但是暂时别担心,把你关注点放在恰当结构上。...在这一步,你将会学习JavaScript基础来为后面的旅程做好准备—— 学习这门语言语法和基本机构。...以下就是一些可以去尝试pull请求: 增强UI,把任何演示做成响应式或者改进设计 看看有什么开放issue是你能够解决 重构任何你认为自己可以改进代码 就像这个repo一样,告诉他们你正在学习让他们就你...选一个框架 在旧路线图中,这个部分往往是紧挨着基础部分,但是这次改到放在Sass、构建工具和包管理器后面了,因为在框架你全都会用上那些东西,如果不具备相应知识的话会吓到你

1.3K10
  • 现代前端开发路线图:从零开始,一步步成为前端工程师

    在详细介绍这份路线不同部分之前,先花点时间讲讲免责声明: 这份路线目的是让你了解一下整体情况并且提供指导,如果你对接下来该学什么感到困惑的话。但并不鼓励你用赶时髦心态去学东西。...建议你随便找一个 网站,比如看看Github档案或者Twitter登录。然后把焦点放在恰当地组织内容上。出来东西可能会很难看,但是暂时别担心,把你关注点放在恰当结构上。...在这一步,你将会学习JavaScript基础来为后面的旅程做好准备—— 学习这门语言语法和基本机构。...以下就是一些可以去尝试pull请求: 增强UI,把任何演示做成响应式或者改进设计 看看有什么开放issue是你能够解决 重构任何你认为自己可以改进代码 就像这个repo一样,告诉他们你正在学习让他们就你...选一个框架 在旧路线图中,这个部分往往是紧挨着基础部分,但是这次改到放在Sass、构建工具和包管理器后面了,因为在框架你全都会用上那些东西,如果不具备相应知识的话会吓到你

    77810

    编写模块化CSS——BEM

    然后,当我尝试不同方法时,开始把认为有意义东西包含在探索过程。 在这篇文章想和大家分享一下如何构建 CSS 以及为什么这样做。 希望它可以帮助你找到你喜欢方法。...当我在寻找一个出色 CSS 架构时究竟在找什么 当我将不同方法拼凑在一起以形成自己习惯时,我会寻找以下四个特点: 必须 立即知道编辑一个 class 是否安全,会不会干扰其他 CSS。...当我第一次看见 BEM 时候,就很讨厌它,甚至没有给它一个机会。不记得是什么驱使尝试 BEM 但我现在深深知道它有多么强大。...让来完整地解释一下 BEM 是什么(当然,加入了自己理解)。 块(Block) 一个块就是一个组件。这有点抽象,所以让我们用示例来学习。 假设您正在建立一个联系表单。...如果你这样做,请确保 .comments 和 .comment块放在同一个文件,以方便参考。 不幸是,有时候它不像 .comments__comment 那么简单。

    2.1K70

    那些你从不使用 HTML 属性,背后竟然大有文章,赶快了来了解下

    用户是否正在执行一系列操作?他们在提交信息吗?他们在保存设置吗?根据他们正在做什么,您可以自定义提示以匹配您应用程序需求。 您可以通过在移动设备上访问下面的 CodePen 演示来尝试这个。...您可以通过使用 Firefox 或其他兼容浏览器访问以下 CodePen 来尝试上述示例: 下面的屏幕截图显示了 Firefox 样式表选项: 如前所述,此功能在 Firefox 中有效,但我无法让它在任何基于...如果您正在寻找一种反转内容方法,请记住这一点。这是您可以使用 JavaScript、CSS 或直接在 HTML 源代码执行操作。 上面,还提到了其他三个属性。...但是,如果您应用程序或布局需要一些不同东西,您可以选择表单输入放在您想要任何位置,并将其与任何元素相关联——即使不是元素父元素。...submit您可以使用此属性和表单 id表单控件(包括按钮)与文档任何表单相关联。 您可以使用此演示页面进行尝试表单使用 GET 请求提交,因此您可以在 URL 查询字符串中看到提交值。

    1.5K30

    你不知道HTML

    用户是否正在执行一系列操作?他们在提交信息吗?他们在保存设置吗?根据他们正在做什么,您可以自定义提示以匹配您应用程序需求。 您可以通过在移动设备上访问下面的 CodePen 演示来尝试这个。... 由于我上面的解释了MDN 文章cite是怎样工作,因此指向页面的 URL 设置为cite值。...如果您正在寻找一种反转内容方法,请记住这一点。这是您可以使用 JavaScript、CSS 或直接在 HTML 源代码执行操作。 上面,还提到了其他三个属性。...但是,如果您应用程序或布局需要一些不同东西,您可以选择表单输入放在您想要任何位置,并将其与任何元素相关联——即使不是元素父元素。...submit您可以使用此属性和表单id表单控件(包括按钮)与文档任何表单相关联。 您可以使用此演示页面进行尝试表单使用 GET 请求提交,因此您可以在 URL 查询字符串中看到提交值。

    4.2K164

    多年前端开发程序员论述:这些必然前端疲劳

    高兴地知道你不是一个糟糕开发人员,你只是还没有尝试过技术大牛们正在使用东西。 #是的,即使是“web名人”也有同样困境… 你会注意到,他们出名领域恰好是他们所熟知领域。...例如,当react一跃成名,它似乎总是和ES6捆绑在一起,把重点放在语言那些改变和新特性上而不是框架本身细微差别。一旦react不火了,从最新JavaScript上学到知识继续存在下去。...认为正在扼杀我们不是新框架、库和模块,而是我们自己必须把它们全部学会信念。 通过学习发现最好办法是专注——此刻正在钻研ES6JavaScript函数式编程。...清单上还有很多想学东西,但我尽量不分心。例如,喜欢温习我会知识,钻研一些最新CSS技术,但是如果一次开始阅读太多不同领域,得不到所有的信息。...脱离成长轨迹,过不了多久你就会迷失在追逐玩流行语过程。 #大多数公司没有使用尖端技术 现在有很多新东西出现,web正在以惊人速度发展,但通常企业真正在业务开始采用这些新技术,需要很长时间。

    64830

    之所以被裁也许是少了这些东西

    在这篇文章提供一个不完整编程主题列表,关于这些东西,人们总是错误地认为很懂。 并不是说你不需要学习它们,或者不知道其他有用东西。...也从来没有系统地学习过Bash,所以我只能编写非常简单(通常是错误)shell脚本。 低级语言。知道Assembly允许你内容存储在内存并跳转代码,但也仅限于此。...有一个模糊记忆,他们让以可预测方式启动一个单独VM。 这听起来很酷,但我还没试过。 无服务应用架构。 听起来也很酷,不过没试过不清楚该模型是怎样改变后端编程(如果确实如此的话)。...也不会用像React这样框架写一个“hello world”。 原生平台。曾经尝试过学习Objective C,但是放弃了,也没有学过Swift,关于Java也是如此。...Floats才是菜。 CSS方法论。使用BEM(仅仅是CSS部分,而不是原始BEM),这就是知道一切。没有尝试过OOCSS或其他方法。 SCSS/Sass。从来没有学过它们。 CORS。

    49420

    坦然面对:应对前端疲劳

    要高兴地知道你不是一个糟糕开发人员,你只是还没有尝试过酷孩子们正在使用东西。...例如,当react一跃成名,它似乎总是和ES6捆绑在一起,把重点放在语言那些改变和新特性上而不是框架本身细微差别。一旦react不火了,从最新JavaScript上学到知识继续存在下去。...认为正在扼杀我们不是新框架、库和模块,而是我们自己必须把它们全部学会信念。 通过学习发现最好办法是专注——此刻正在钻研ES6JavaScript函数式编程。...清单上还有很多想学东西,但我尽量不分心。例如,喜欢温习我会知识,玩Polymer,钻研一些最新CSS技术,比如Grid,但是如果一次开始阅读太多不同领域,得不到所有的信息。...脱离成长轨迹,过不了多久你就会迷失在追逐玩流行语过程。 大多数公司没有使用尖端技术 现在有很多新东西出现,web正在以惊人速度发展,但通常企业真正在业务开始采用这些新技术,需要很长时间。

    867120

    程序员最佳学习方法(干货总结)

    学习力 学习力不同于学习能力,而是知识资源转换为知识储备能力,你看了多少书、文章,这是你知识总量(阅读量),但不是你拥有的.你能够讲出来知识,就是你所拥有的....输出倒逼输入 如何提高巩固自己实力,也是本人最喜欢一个学习方法,在整理自己笔记之后,尝试把自己笔记转成文章输出出来,放在博客,简书或者CSDN等技术论坛上....这就是弹性时间学习法,以完成目标为重心学习方法 随机目标学习法 随机目标就是,不要只把学习重点只放在一个范围内,而是要做好随时跳出去准备,只有懂得多了,才能更容易理解后面的知识。...例如学习HTML和CSS过程,可能会涉及到Cookie和Session,那么这两个东西又属于HTTP协议,如果这个时候,你不去延伸一下什么是HTTP协议的话,后面的内容就无法融会贯通。...按照自己学习路线,买一些提升书籍去读,一星期看一本400书是工作的人基本水平吧。 重点不是如何学,而是如何切换到学习模式,而不是休息和娱乐模式。

    53671

    python爬虫之初恋 selenium

    selenium 是一个web应用测试工具,能够真正模拟人去操作浏览器。 用她来爬数据比较直观,灵活,和传统爬虫不同是, 她真的是打开浏览器,输入表单,点击按钮,模拟登陆,获得数据,样样行。...,不同浏览器版本需要不同驱动版本;版本信息: chrome info: chrome=66.0.3359.139 Driver info: chromedriver=2.37.544315...chromedriver浏览器驱动 chromedriver 放置位置也很重要,把chromedriver放在等会要写.py文件旁边是最方便方法。...此时窗口地址栏下方会出现【Chrome 正在受到自动测试软件控制】字样。 ?...除了捕获元素还有其他方法: refresh() 刷新 close() 关闭当前标签 (如果只有一个标签就关闭浏览器) quit() 关闭浏览器 title 获得当前页面的title window_handles

    93010

    2021年程序员最佳学习方法—干货总结!

    ---- 学习力 学习力不同于学习能力,而是知识资源转换为知识储备能力,你看了多少书、文章,这是你知识总量(阅读量),但不是你拥有的.你能够讲出来知识,就是你所拥有的. ---- 适度学习法 学习一定要找到难度适中...在讲过程,就会发现自己的话有瑕疵,就会去寻找正确说法,不断修正自己. ---- 输出倒逼输入 如何提高巩固自己实力,也是本人最喜欢一个学习方法,在整理自己笔记之后,尝试把自己笔记转成文章输出出来...这就是弹性时间学习法,以完成目标为重心学习方法 ---- 随机目标学习法 随机目标就是,不要只把学习重点只放在一个范围内,而是要做好随时跳出去准备,只有懂得多了,才能更容易理解后面的知识。...例如学习HTML和CSS过程,可能会涉及到Cookie和Session,那么这两个东西又属于HTTP协议,如果这个时候,你不去延伸一下什么是HTTP协议的话,后面的内容就无法融会贯通。...推荐你看书,因为知道,每天上完班是疲惫,谁不想舒舒服服吃顿饭,躺下休息。按照自己学习路线,买一些提升书籍去读,一星期看一本400书是工作的人基本水平吧。

    37300

    Web 框架替代方案

    上周,我们从框架试图解决哪些核心问题角度出发,考察了使用框架不同好处和代价,重点放在声明性编程、数据绑定、反应性、列表和条件。今天,我们来看看能否在 Web 平台上找到替代方案。...不喜欢过度使用 CSS 类作为 JavaScript 选择器。认为它们应该被用来风格相似的元素组合在一起,而不是作为改变组件风格一种万能机制。...(清除已完成任务,所有任务标记为已完成或正在进行,获得正在进行和已完成计数)。...精简、面向表单 HTML 接下来,采用 TodoMVC 模板,并将其修改为面向表单模板:表单层次结构,输入和输出元素代表可以用 JavaScript 改变数据。...选择在 CSS 实现这个简单过滤器,以显示它能走多远,但如果它开始变得棘手,那么把它移到模型是完全有意义

    2.6K10

    基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用

    但我们实际在工作,经常会遇到有购物车项目,这类项目因为涉及到money,所以对逻辑严谨度要求高,页面之间交互复杂,又会伴随着登陆、注册、用户信息等等,常常会让我们很头疼。...因为利用业余时间来做,年前就开始写,又跨个年,周期有点长,项目从零布局到完成共用了2个多月时间,目前项目已经完成,正在进行一些性能优化,增加详细注释。...地址在这里 关于 demo 与 数据 说明 1、下载代码运行后,因为开启了反向代理,可以获取真实官方数据,最终可以进行下单(真实下单,而不是模拟,下单后可以在官方App查看并付款,亲自试过,...x] 添加、删除、修改收货地址 -- 完成 [x] 帐户信息 -- 完成 [x] 服务中心 -- 完成 [x] 红包 -- 完成 [x] 上传头像 -- 完成 付款 -- 臣妾做不到啊 总结 1、...登陆 ? 个人中心 ? 确认订单 ?

    76720

    基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用

    但我们实际在工作,经常会遇到有购物车项目,这类项目因为涉及到money,所以对逻辑严谨度要求高,页面之间交互复杂,又会伴随着登陆、注册、用户信息等等,常常会让我们很头疼。...因为利用业余时间来做,年前就开始写,又跨个年,周期有点长,项目从零布局到完成共用了2个多月时间,目前项目已经完成,正在进行一些性能优化,增加详细注释。...地址在这里 关于 demo 与 数据 说明 1、下载代码运行后,因为开启了反向代理,可以获取真实官方数据,最终可以进行下单(真实下单,而不是模拟,下单后可以在官方App查看并付款,亲自试过,...x] 添加、删除、修改收货地址 -- 完成 [x] 帐户信息 -- 完成 [x] 服务中心 -- 完成 [x] 红包 -- 完成 [x] 上传头像 -- 完成 付款 -- 臣妾做不到啊 总结 1、...登陆 ? 个人中心 ? 确认订单 ?

    2.3K90

    「译」如何用原生JS打造一款简易谷歌插件

    做一款谷歌插件并没有那么困难——在学习编程第一年,发布了两个插件,并且都是用HTML、CSS和原生JS做。在这篇文章,我会用几分钟时间教你们怎么完成这件事。...有许多不同类型插件,有些插件仅在某种特定条件下才会激活,比如当你在商店结账页面的时候;有些插件仅在你点击图标后才会弹出;有些则在你每次打开新标签时候才会出现。...首先需要创建三个文件:index.html,main.css和main.js。这些文件放在各自文件夹。接下来,在html文件书写必要声明,并引入css文件和js文件: <!...上传你文件(如果你正在编写自己页面) 要创建你“新标签式”谷歌插件,只需明悉以上全部信息即可。...var userName = localStorage.getItem('receivedName'); 在这条语句添加进表单事件监听器之前,想要让浏览器默认指定一个用户名,以应对没有告诉它名字情况

    1.6K50

    React从入门到放弃,一个关于网页速度故事

    新工作尝试了 React,并在 Clojure 主题峰会(Clojure Cup 2013)期间发现 CLJS 和 React 简直是天作之合。React 为什么这么好呢?...然后 QA 会发现比你想象多得多错误状态。然后用户会向我们呼叫中心报告更多错误。那糟糕程度简直超乎你想象。...当我纠结于对 HTML 片段请求时,明白了一件事:当我为目录选择技术路线图时,最后选择是“类似 intercooler 小东西”。 那为什么还不行动呢?...4 TwinSpark 喜欢 Intercooler 在处理 AJAX 方面的流畅方案,所以我决定用一些汽车方面的东西来命名这个库,而 TwinSpark 似乎是一个不错名字。...从代码移除 React 相关代码并将我们 app 打造成一个服务端应用程序仍然花费了很多时间和精力。它仍然需要一些润色,但我们还是决定发布它来缩短时间。

    1K20

    看懂 Serverless SSR,这一篇就够了!

    这就是内容概要全部内容了,如果您想更深入地研究该主题,或者只是想看看我们尝试过无服务器方法和实现成果,建议您继续往下看。 Serverless Side Rendering ?...您会看到没有一个方案能解决所有问题,像灵丹妙药一样,您选择解决方案取决于您正在构建应用程序以及它自身要求和条件。 由于有很多零散部分要说,为了能给您呈现一个全面的解析,决定从头开始讲。...首先,让我们谈谈单应用程序! Before we begin ? 单应用程序, 我们介绍它们主要功能,优点/缺点,并且总体上,我们还将讨论Web上不同渲染方法。...图书馆文档指出,应至少分配512MBRAM,但建议分配1600MB或更多。这就是为什么我们没有所有逻辑都放在一个Lambda函数(放入Web服务器Lambda原因。...如果您有任何疑问,请随时关注我们,我们很乐意为您解答! 再次希望能解释一下我们在Webiny尝试过方法,但是如果您有任何疑问,请随时提出!

    7K41

    敢不敢接招:用CSS实现3D立方体

    你愿意承担一项以前从没遇到过任务并且按时完成么?如果在进行任务,你碰到来一个似乎无法解决问题呢?想分享使用CSS 3D效果经历,那是第一次用于实际项目中,以此来激励你接受挑战。...添加了标注来剩下侧面的初始位置对齐。 开始旋转立方体时发现底部和背面的标注说明都显示颠倒了: 查看代码 ,由Anna Selezniova (@askd 在 CodePen)上编写。...在上面的样例preserve-3d换成了flat。你是不是已经知道了?哼!让你不要偷看了! 很烦躁,但我并不打算放弃。遇到一个问题就是获得一次学习新东西机会。再说,已经接收了这次挑战。...在这个例子,元素3D旋转是不是和立方体正面很像?这正是要用。 (顺便问一下,你尝试过在三维旋转过程中选择多选框backface-visibility:hidden么?...同样,你也可以尝试拉出左边黑三角上下拖动来手动控制旋转角度(遗憾是,这个特征在IE浏览器无法工作)。看起来确实不错吧?而且性能也相当高(大概每秒60帧)。 很高兴参与了这个网站开发。

    85740

    2020 年你应该知道 React 库

    它带有一些内置解决方案,例如,用于本地状态和副作用 React Hooks。 下面的文章向您提供一些自己总结方法,以便从补充库中进行选择,从而构建一个全面的 React 应用程序。...在您引入路由以前,您可以先尝试 React 条件渲染,它虽然不是路由合理替代,但是小型应用以及足够用了。...CSS Modules 受到 create-react-app 支持,并为您提供了 CSS 封装到模块方法。这样,它就不会意外地泄漏到其他人样式。...以前用过 Sketch,但最近转到了 Figma。尽管我两者都喜欢,但我现在并不后悔使用 Figma。另一个流行工具是 Framer。...因此,这里再次列出了可以补充 React 作为应用程序关于不同项目大小核心库。请记住,这个列表是个人看法,也渴望得到你反馈。

    14.4K40
    领券