css div垂直居中的几种方法
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
css div垂直居中的几种方法
Flex布局是CSS3中引入的一种新的布局方式，可以实现各种复杂布局，包括垂直居中。
在父元素上设置display: flex和
align-items: center即可实现子元素垂直居中。
2. 使用absolute定位和transform
在父元素上设置position: relative，子元素上设置position: absolute和top: 50%。
然后使用transform属性将元素向上移动自身高度的一半，即transform: translateY(-50%)，即可实现垂直居中。
3. 使用table和table-cell布局方式
在父元素上设置display: table，子元素上设置display: table-cell和vertical-align: middle即可实现垂直居中。
4. 使用line-height
如果子元素只有一行文本，可以设置父元素的line-height等于父元素的高度，即可实现垂直居中。
但是这种方法仅适用于单行文本。
以上是几种实现div垂直居中的方法，可以根据具体情况选择合适的方法来实现垂直居中效果。
- 1 -。