× 目录 [1]水平对齐+行高 [2]水平+垂直对齐 [3]margin+垂直对齐 [4]absolute [5]flex
前面的话
水平居中和垂直居中已经单独介绍过，本文将介绍水平垂直同时居中的5种思路
思路一: text-align + line-height实现单行文本水平垂直居中
<style>.test{ text-align: center; line-height: 100px;}</style>登录后复制
<div class="test" style="background-color: lightblue;width: 200px;">测试文字</div>
登录后复制
思路二: text-align + vertical-align
【1】在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素
[注意]若兼容IE7-浏览器，将结构改为
结构来实现table-cell的效果；用display:inline;zoom:1;来实现inline-block的效果
<style>.parent{ display: table-cell; text-align: center; vertical-align: middle;}.child{ display: inline-block;}</style>登录后复制
<div class="parent" style="background-color: gray; width:200px; height:100px;"> <div class="child" style="background-color: lightblue;">测试文字</div></div>
登录后复制
【2】若子元素是图像，可不使用table-cell，而是其父元素用行高替代高度，且字体大小设为0。子元素本身设置vertical-align:middle
<style>.parent{ text-align: center; line-height: 100px; font-size: 0;}.child{ vertical-align: middle;}</style>登录后复制
<div class="parent" style="background-color: gray; width:200px; "> <img class="child lazy" src="/static/imghw/default1.png" data-src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" style="max-width:90%" alt="test"></div>
登录后复制
思路三: margin + vertical-align
要想在父元素中设置vertical-align，须设置为table-cell元素；要想让margin:0 auto实现水平居中的块元素内容撑开宽度，须设置为table元素。而table元素是可以嵌套在tabel-cell元素里面的，就像一个单元格里可以嵌套一个表格
[注意]若兼容IE7-浏览器，需将结构改为
结构
<style>.parent{ display:table-cell; vertical-align: middle;}.child{ display: table; margin: 0 auto;}</style>登录后复制
<div class="parent" style="background-color: lightgray; width:200px; height:100px; "> <div class="child" style="background-color: lightblue;">测试文字</div></div>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
思路四: 使用absolute
【1】利用绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin:auto
<style>.parent{ position: relative;}.child{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 50px; width: 80px; margin: auto;}</style>登录后复制
<div class="parent" style="background-color: lightgray; width:200px; height:100px; "> <div class="child" style="background-color: lightblue;">测试文字</div></div>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
【2】利用绝对定位元素的偏移属性和translate()函数的自身偏移达到水平垂直居中的效果
[注意]IE9-浏览器不支持
<style>.parent{ position: relative;}.child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}</style>登录后复制
<div class="parent" style="background-color: lightgray; width:200px; height:100px; "> <div class="child" style="background-color: lightblue;">测试文字</div></div>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
【3】在子元素宽高已知的情况下，可以配合margin负值达到水平垂直居中效果
<style>.parent{ position: relative;}.child{ position: absolute; top: 50%; left: 50%; width: 80px; height: 60px; margin-left: -40px; margin-top: -30px;}</style>登录后复制
<div class="parent" style="background-color: lightgray; width:200px; height:100px; "> <div class="child" style="background-color: lightblue;">测试文字</div></div>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
思路五: 使用flex
[注意]IE9-浏览器不支持
【1】在伸缩项目上使用margin:auto
<style>.parent{ display: flex;}.child{ margin: auto;}</style>登录后复制
<div class="parent" style="background-color: lightgray; width:200px; height:100px; "> <div class="child" style="background-color: lightblue;">测试文字</div></div>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
【2】在伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items
<style>.parent{ display: flex; justify-content: center; align-items: center;}</style>登录后复制
<div class="parent" style="background-color: lightgray; width:200px; height:100px; "> <div class="child" style="background-color: lightblue;">测试文字</div></div>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
＆gt; gt;的目的是什么 元素？
Mar 21, 2025 pm 12:34 PM
本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati
＆lt; meter＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:35 PM
本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前
视口元标签是什么？为什么对响应式设计很重要？
Mar 20, 2025 pm 05:56 PM
本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。
HTML容易为初学者学习吗？
Apr 07, 2025 am 12:11 AM
HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。
HTML中起始标签的示例是什么？
Apr 06, 2025 am 12:04 AM
AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。
See all articles
