核心提示:1.水平居中:style#parent{width:300px;height:300px;background:#e5e5e5;}.child{width:150px;margin:0 auto;ba...
1.水平居中:
<style> #parent{ width:300px;height:300px;background:#e5e5e5; } .child{width:150px;margin:0 auto;background:red;} </style> <p id="parent"> <p class="child"> today is a funny day! </p> </p>
2.垂直居中:
<style> #parent{ position:relative;height:300px;background:#e5e5e5; } .child{position:absolute;top:0;bottom:0;background:red;margin:auto 0;text-decoration:center;width:140px;height:20px;} </style> <p id="parent"> <p class="child"> today is a funny day! </p> </p>
3.垂直居中还用vertical-align:middle;经常搭配父元素display:table-cell;使用