css设置居中

水平垂直居中

vertical-aligh: middle最常见垂直居中方法前提条件：display:inline-block

	 .out{
           width: 300px;
           height: 300px
       }
      .in{
           width: 50%;
           height: 50%;
           display: inline-block;
           vertical-align: middle
       }

绝对定位和0（需要确定内部元素高度，可用百分比，比较适合移动端）

	  .box{
            width: 100%;
            height: 100%;
            background-color: #ff0000;
        }
        .box span {
            width: 50%;
            height: 50%;
            background: #000;
            overflow: auto;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

使用translate属性

	   .box {
            position: relative;
            height: 500px;
            background-color: #ff0000;
        }

        .ver-box {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300px;
            height: 300px;
            background: cadetblue;
            transform: translate(-50%,-50%)     /* 向左上偏移半个内元素宽高 */
        }

使用css3计算的方式（calc）居中元素

	  .box {
            position: relative;
            height: 500px;
            width: 1000px;
            background-color: #ff0000;
        }

        .ver-box {
            position: absolute;
            top: calc(50% - 150px);
            left: calc(50% - 150px);
            width: 300px;
            height: 300px;
            background: cadetblue;
        }

flex布局

     .box {
            display: flex;
            width: 300px;
            height: 300px;
            background: cadetblue;
            justify-content: center;/* 使子元素水平居中 */
            align-items: center   /* 使子元素垂直居中 */
        }

        .ver-box {
            background-color: yellow;
            width: 100px;
            height: 100px;
        }

table-cell布局

table-cell相当于表格的td，行内元素，无法设置宽和高，需嵌套一层（inline-block）元素

	   .box {
            display: table;
            width: 300px;
            height: 300px;
            background: paleturquoise
        }

        .ver-box {
            display: table-cell;
            text-align: center;
            vertical-align: middle; /* 使子元素垂直居中 */
            background: cadetblue  /* 使子元素水平居中 */
        }
        .ver-box-in{
            display: inline-block;
            width: 30%;
            height: 30%;
            background: yellow
        }

垂直居中

display : table-cell 属性（~~IE6/7不支持~~）

该属性是指让标签以单元格的形式呈现，类似 td 标签（带垂直居中对齐、关联伸缩等）
该属性不能同 ~~position、float、margin~~ 等属性同用，但可以设置 padding 值，对 width 值敏感
使用场景：列表个数不固定，需要平分容器控件空间时;多行元素垂直居中

//父级：宽度要设置子元素设置table-cell就会自动等分
.parent{ width:100%; display:table }
.child { display: table-cell ; vertical-aligh: middle; }
内联（inline-）元素居中

		{
			height:400px;
			line-hright:400px
		}

利用flex布局

//方法一：
		.box{
            width: 600px;
            height: 300px;
            display: flex;
            flex-direction: row; /* 默认，水平居中，只要修改为column */
            background-color: cadetblue
        }
        .ver-box{
            align-self: center;
            width: 50%;
            height: 50%;
            background-color: yellow;
        }
//方法二
	.box{
            width: 600px;
            height: 300px;
            display: flex;
            flex-direction: column;  /* 默认为row（水平居中）*/
            background-color: cadetblue;
            justify-content: center
        }

固定高度元素：

.parent{
	position:relative
}
.child{
	 position:absolute;
    top:50%;
    height:100px;
	margin-top:-50px
}

未知高度：

.parent{
	position: relative
}
.child{
	position:absolute;
	top:50%;
	transform:translateY(-50%)
}
//或者：(已知父元素和子元素宽高时)
	.box{
		position:relative;
		top:50%;
		transform:translateY(-50%)
	}

display :-webkit-box css3考虑兼容

.center{
	display:-webkit-box;
	-webkit-box-pack: center;
	-webkit-box-aligh: center;
	-webkit-box-orient: center;
	text-aligh: center
}

新增元素

	//窗口缩小时不会被截断，滚动条出现，所有兼容
	//缺点：新增了空元素
	<div class="floater"></div>  
	<div class="content"> Content here </div>
	
	.floater {
	    float:left; 
	    height:50%; 
	    margin-bottom:-120px;
	}
	.content {
	    clear:both; 
	    height:240px; 
	    position:relative;
	}

通过伪元素::before实现垂直居中

	   .box{
            width: 600px;
            height: 300px;
            flex-direction: column;
            background-color: cadetblue;
        }
        .box::before{
            content: "";
            display: inline-block;
            vertical-align: middle;
            height: 100%;
        }
        .ver-box{
            width: 300px;
            height: 150px;
            display: inline-block;
            background-color: yellow;
            vertical-align: middle
        }

水平居中

margin: 0 auto

//文档流中
{
	width: 100%；
	margin：0 auto;
}
//脱离文档流时
{
	position: absolute;
	width: 666px;
	height:400px;
	left: 50%;
	margin-left: -333px;  //margin : -333px auto；
}

display: flex 弹性布局水平居中：

.flex{
	display:flex;
	justify-content:center; /*横轴对齐方式 */
}
//或者：
.out{
	display:flex;
	flex-direction:column;
}
.in{
	alight-self:center
}

text-aligh:center 居中行内块元素

行内元素：inline、inline-table、inline-block、inline-flex

4.通过table-cell和margin-left实现（父元素和子元素宽度确定）

		.box{
            width: 600px;
            height: 300px;
            display: table-cell;
            flex-direction: column;
            background-color: cadetblue;
            justify-content: center
        }
        .ver-box{
            width: 300px;
            height: 150px;
            background-color: yellow;
            margin-left: 150px
        }

width: fit-content 确保子元素宽度不确定的情况下，实现css水平居中

.out{
	width:300px;
	height:150px;
}
.in{
	width:fit-content;
	height:150px;
	margin:0 auto;
	text-alight:center
}

水平垂直居中

垂直居中

水平居中

猜你喜欢