首页 > Web开发 > 详细

css 居中

时间:2016-12-01 02:58:47      阅读:269      评论:0      收藏:0      [点我收藏+]

今天来总结一下自己知道的居中方法:

一.水平居中

1.text-align:center;  文字水平居中,也可以放在父元素中,强行让子元素居中。

2.margin: 0 auto;   使子元素在父元素中水平居中。

二、绝对居中

1. 父元素定位,子元素也使用定位:position:absolute;

    然后子元素使用 top:0; left:0;right:0;bottom:0;margin:auto;width:xx; (此方法必须定义子元素的高度);

2. 父元素定位,子元素也使用定位:position:absolute;

    然后子元素使用 left: 50%; top:50%; transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%); /* Safari */  (无需定义高度,但是要注意兼容性写法)

三、垂直居中

1.display:inline-block; vitical-align:middle;  (无需定义高度,也可以实现)

2.父元素设置 display:table; 子元素设置display:table-cell;vitical-align:middle;

3.单行文字居中显示,设置height的值与line-height的值相等即可。

今天想到的就这些,想到其他的再来添加。

css 居中

原文:http://www.cnblogs.com/Alisa-pengpeng/p/6120081.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!