3358 www.Sina.com/:在网页布局中，经常需要使元素居中。 居中对齐包括水平居中、垂直居中和水平垂直居中。 这次，以此为基础进行回顾总结，并在这里记录相关内容。
前言
一、水平居中：
如果设定的元素是文字、影像等内嵌元素，请将父元素设定为text-align:center，使内嵌元素水平居中，并将子元素置于display:inline-block中
divclass=' parent ' style=' background-color : gray；' divclass=' child ' style=' background-color : light-blue；' demo/div/div style.parent { text-align : center； }.child { display : inline-block； (}/style
（1）行内元素的水平居中
文本对齐：中心； 就会失去作用。 “margin : 0自动； 对话框，您可以在此定义自定义格式。
divclass=' parent ' style=' background-color : gray；' divclass=' child ' style=' background-color : light blue；' demo/div/div.child { width :200 px； 边距： 0自动； } (2)块状元素的水平居中（定宽）
在实际工作中，“不定宽度块级元素”必须居中，例如网页上的页面导航。 页数是不确定的，所以不能通过设置宽度来限制灵活性。
可以直接在修补程序块级别元素上设置文本对齐：中心； 来删除它。 也可以将文本对齐：中心添加到父元素； 实现对中效果。
如果不定宽度块级元素的宽度不能适合一行，则可以将display设置为inline或inline-block。 display被设置为内联元素显示或内联块元素。
divclass=' container ' ulliahref=' # '1/a/lilia href=' # '2/a/lilia href=' # '3/a/Li/ul/div.containtaintive }.container ul { list-style : none； 边距： 0； padding: 0； 显示：在线块； }.container Li { margin-right :8 px； 显示：在线块； () ) ) ) )。
(3)块状元素的水平居中（不定定宽）
与水平居中对齐类似，对于垂直居中对齐，必须首先设置两个条件：父元素为箱形容器，并且设置了高度。
二、垂直居中
在这种情况下，必须通过将父元素的line-height设置为高度来垂直居中子元素。
div class=' wrap line-height ' span class=' span ' 111111/span/div.wrap { width :200 px； height: 300px； line-height: 300px； border: 2px solid #ccc； }.span { background: red； () ) ) ) )。
（1）子元素是行内元素，高度是由其内容撑开的。
通过在父元素中设置display :表单元格，生成vertical-align:middle； 可以解决。
div class='wrap' div class='non-h
eight">111111</div></div> .wrap { width: 200px; height: 300px; border: 2px solid #ccc; display: table-cell; vertical-align: middle;}.non-height { background: green;}(3)子元素是块级元素且高度已经设定
计算子元素的margin-top或margin-bottom，计算方法为父（元素高度-子元素高度）/ 2；
<div class="wrap"> <div class="div1">111111</div></div> .wrap { width: 200px; height: 300px; border: 2px solid #ccc;}.div1 { width: 100px; height: 100px; margin-top: 100px; background: darkblue;}三、水平垂直居中
（1）水平对齐+行高
text-align + line-height实现单行文本水平垂直居中
<style> .test { text-align: center; line-height: 100px;}</style> <div class="test" style="background-color: lightblue;width: 200px;"></div>(2)水平+垂直对齐
①text-align + vertical-align 在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为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>②若子元素是图像，可不使用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" src="images/1.png" width="50%" alt="test"></div>(3)相对+绝对定位
使用absolute，利用绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin: auto;
<style>.parent { position: relative;}.child { position: absolute; top: 0; left: 0; right: 0; bottom: 0; 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>PS:01、补充《三》中的水平垂直居中的方式（2018/08/29）
translate()函数可以在不知道自身宽高的情况下，利用它进行水平垂直居中。但是，有兼容性问题，支持IE9+的游览器。
使用translate函数，配合left，top属性，可以让目标元素始终保持水平垂直居中，当游览器窗口发生变化时，也能一直保持水平垂直居中。
<div class="wrap"> 不知道宽高，可以水平垂直居中</div> .wrap { padding: 10px; background: green; color: #fff; border-radius: 5px; position: absolute; top: 50%; left: 50%; /*定位margin-left:50%的位置*/ -webkit-transform: translate(-50%,-50%); /*Safari,Chrome*/ -moz-transform: translate(-50%,-50%); /*IE9+*/ transform: translate(-50%,-50%); /*使元素本身向左移动宽度的一半*/ /*transform使元素在当前位置分别往x轴，y轴正向平移自身宽度的一半距离。*/}02、补充《三》中的水平垂直居中的方式（2018/11/29）
场景：使用背景图片属性，使图片在父元素的盒子中始终居中，但是，背景图片的尺寸大小不固定。
关键：background-position:center center;(background-position:50% 50%;)属性。
<div class="index-imgBlock"> <div class="index-image"></div></div> .index-image { height: 268px;/*选取三张图片中最大高度的尺寸设定*/ width: 100%; max-width: 484px; /*选取三张图片中的最大宽度的尺寸设定*/ background: url(images/403.png); /*403图片尺寸为484*206*/ /*background: url(images/404.png);*/ /*403图片尺寸为428*268*/ /*background: url(images/500.png);*/ /*500图片尺寸为475*236*/ background-position: center center; border: 1px solid #333333;}
background-position属性默认值为0% 0%，即背景图像的左上角与对象背景区域的左上角对齐。使用background-position:center center;/background-position:50% 50%;这样就可以使背景图像的中心，与背景区域的中心对齐，即背景图像位于对象的中央位置。
参考博客：CSS布局（六）对齐方式 点击打开链接 http://www.cnblogs.com/chaixiaozhi/p/8490725.html
版权声明：本文为博主原创文章，未经博主允许不得转载。