元素居中

2018-06-24 00:49:24来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

一、行内元素水平居中

  text-align: center;

二、行内元素垂直居中

  height: 40px;line-height: 40px;    让这两个值相等

三、块级元素水平居中

 width: 300px; margin: 0 auto;     可以不设置高度

三、块级元素垂直居中

  1.固定宽高块级元素垂直居中

    

            div{ width: 200px;
		height: 100px;
		line-height: 100px;
		border: 1px solid #000;
		text-align: center;
		position: absolute;
		left: 50%;
		top: 50%;
                margin-left: -100px;
		margin-top: -50px;
            }    

  2.宽高是百分比的块级元素垂直居中

    

         div{
               width: 10%;
		height: 30%;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;   
}

  3.宽高不固定的块级元素垂直居中

    

        div{
             
		transform: translate(-50%,-50%);/*此时的百分数是以自身的宽高为参考*/
		/*width: 1500px;

		height: 300px;*/

		/*width: 300px;*/

		width: 30%;

		height: auto;        

  





 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:css中line-height行高的深入学习

下一篇:Bootstrap之栅格系统