大学IT网 - 最懂大学生的IT学习网站! QQ资料交流群:367606806
当前位置:大学IT网 > CSS技巧 > CSS居中完全解决方案

CSS居中完全解决方案

关键词:居中CSS  阅读(645) 赞(18)

[摘要]本文是对CSS居中完全解决方案的讲解,对学习CSS编程技术有所帮助,与大家分享。

上次面试面试官问到了,问了个定宽局中和不定宽局中,下来我把所有有关CSS居中都总结了一下

水平居中

行内元素

把行内元素嵌套在一个DIV中,并且在DIV中设置以下样式

a{
		text-align: center;
	}

块级元素

对于定宽的块级元素,我们要设置起margin-top,margin-right 为auto

.center{
		margin: 0 auto;
	}

多个块级元素(inline-block)

多个块级元素,我们将其display设置为inline-block;然后将父级元素设置一下属性

div{
		text-align: center;
	}

多个块级元素(flex)

设置需要水平居中的块状元素的父元素display为flex ,并且justify-content属性为center即可

body{
	  display: flex;
	  justify-content: center;
	}

垂直居中

单行 行内元素

将行内元素的height和line-height设置为一致即可

a{
	  height: 200px;
	  line-height:200px;  
	}

多行 行内元素

如果行内元素文字过多产生多行,则在父级元素设置display: table-cell;vertical-align:middle;

.container{
		width: 300px;
		height: 300px;
		display: table-cell;
		vertical-align:middle;
	}

已知高度的块级元素

将块级元素设置绝对定位,top为50%,margin-top:-height/2

div{
	  height: 100px;
	  position: absolute;
	  top: 50%;
	  margin-top: -50px;
	  padding:0; 
	}

未知高度的块级元素

使用CSS translate,将块级元素设置绝对定位,top为50%,transform: translateY(-50%);

div{
	  position: absolute;
	  top: 50%;
	  transform: translateY(-50%);
	  padding:0; 
	}

水平垂直居中

已知高度、宽度的元素

将块级元素设置绝对定位,top为50%,left:50%;margin-top:-height/2;margin-left:-width/2

div{
		width: 150px;
		height: 150px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -75px;
		margin-left: -75px;
	}

已知高度、宽度的元素(flex)

给父级使用flex布局

div{
		display: flex;
		justify-content:center;
		align-items: center;
	}

未知高度、宽度的元素

使用CSS translate

div{
	    position:absolute;
		top:50%;
		left:50%;
		-webkit-transform:translate(-50%,-50%);
		-moz-transform:translate(-50%,-50%);
		transform:translate(-50%,-50%);
	}


相关评论