您现在的位置是：网站首页> 编程资料编程资料
css 实现文字垂直居中 _CSS教程_CSS_网页制作_
2021-09-08
661人已围观
简介 如题，用html，css如何实现垂直居中。水平居中我们知道最简便的方法就是margin:auto，但是margin只是相对宽度有效。
分两种情况：
fix height：
即垂直居中的元素高度已知，这个比较简单，也不需要额外的辅助元素。
提示：您可以先修改部分代码再运行
variable height：
居中元素高度可变，这个需要额外的一个wrapper元素，用table-cell的方式来模拟表格的居中实现，当然，早期的ie又是另一招，具体可见代码。
提示：您可以先修改部分代码再运行
fix height：
即垂直居中的元素高度已知，这个比较简单，也不需要额外的辅助元素。
提示：您可以先修改部分代码再运行
variable height：
居中元素高度可变，这个需要额外的一个wrapper元素，用table-cell的方式来模拟表格的居中实现，当然，早期的ie又是另一招，具体可见代码。
提示：您可以先修改部分代码再运行
相关内容
- css overflow与text-indent:-999em 字体隐藏 _CSS教程_CSS_网页制作_
- CSS省略号text-overflow超出溢出显示省略号_CSS教程_CSS_网页制作_
- Iframe 高度自适应（兼容IE/Firefox、同域/跨域）_浏览器兼容教程_CSS_网页制作_
- 有利于SEO优化的DIV+CSS的命名规则小结 _Div+CSS教程_CSS_网页制作_
- 5个DIV并排在一行的一种方法 _Div+CSS教程_CSS_网页制作_
- CSS值、单位和字体说明_CSS教程_CSS_网页制作_
- 请保留超链接的outline属性_CSS教程_CSS_网页制作_
- WEB标准之CSS 打造自己的reset.css_Web标准教程_CSS_网页制作_
- CSS 制作漂亮的网页表单_CSS教程_CSS_网页制作_
- CSS3 please 跨浏览器的CSS3产生器_css3_CSS_网页制作_
