CSS之居中对齐

上下左右居中对齐需要考虑两种情况，一种是里层元素是内联，另一种情况是block； 使用绝对布局实现居中对齐，而且不区分里层元素是否是block；

绝对布局实现

<div id="test2"> <!-- <div> 呵呵呵 </div> --> <img src="imgs/lalala.jpg" alt=""> </div> -------style----- #test2 { font-size: 30px; background-color: #abcdef; width: 800px; height: 800px; position: relative; } #test2 > div{ width:200px; height: 200px; background-color:black; position: absolute; margin:auto; top:0; left:0; right:0; bottom:0; }

diaplay：table-cell来实现

如果不想脱离文档流，通常使用diaplay：table-cell来实现 table-cell可以控制两个重要属性来实现居中，即text-align和vertical-align 但是text-align对div无效，因此如果里层是div，则需要改变他的display为inline-bolck

/* #test2 { width: 800px; height: 800px; display:table-cell; vertical-align:middle; background-color: red; text-align: center; } #test2 > div { width: 600px; height: 600px; background-color:black; display:inline-block; } */

如果里层是内联，例如图片，需要注意是的，图片也是vertical-align:middle; 因为图片的默认对齐方式是vertical-align:bottom; 底部对齐，相当于图片的下端与字母x的下端对齐，改成vertical-align:middle;即中线对象，与x的中线对齐。

/* #test2 { width: 800px; height: 800px; background-color: #abcdef; display:table-cell; text-align: center; vertical-align:middle; } #test2 img { vertical-align:middle; } */

如果里层是内联，也可以不设置table-cell,而改用行高， 重要的是理解 text-align: center; vertical-align:middle; 对什么有效，对什么无效，以及在table-cell下的表现

/* #test2 { width: 800px; height: 800px; background-color: #abcdef; text-align: center; vertical-align:middle; line-height: 800px; } #test2 img { width: 20%; vertical-align:middle; } */