360 css grid,CSS水平垂直居中方案 包括Grid方案

/* 第一种方案 子元素高度可以设定也可以不设定*/

.app{

width: 500px;

height: 500px;

background: greenyellow;

display: flex;

align-items: center;

justify-content: center;

}

.app>div{

width: 100px;

height: 100px;

font-size: 20px;

background: blueviolet;

}

/* 第二种方案 子元素高度可以设定也可以不设定*/

.app{

width: 500px;

height: 500px;

background: greenyellow;

position: relative;

}

.app>div{

width: 100px;

height: 100px;

font-size: 20px;

background: blueviolet;

position: absolute;

top: 0;

left: 0;

right: 0;

bottom:0;

margin: auto;

}

/* 第三种方案 子元素高度可以设定也可以不设定*/

.app{

width: 500px;

height: 500px;

background: greenyellow;

position: relative;

}

.app>div{

width: 100px;

height: 100px;

font-size: 20px;

background: blueviolet;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

}

/* 第四种方案 高度就是文字加line-height的高度 局限性在于必须里边的元素是inline否则不生效*/

.app{

width: 500px;

height: 500px;

background: greenyellow;

line-height: 500px;

text-align: center;

}

.app>div{

width: 100px;

font-size: 20px;

background: blueviolet;

display: inline;

}

/* 第五种方案 横向利用margin auto，垂直还是利用定位和平移 也不用管里边元素的高度*/

.app{

width: 500px;

height: 500px;

background: greenyellow;

}

.app>div{

width: 100px;

font-size: 20px;

background: blueviolet;

position: relative;

top: 50%;

transform: translateY(-50%);

margin-left: auto;

margin-right:auto ;

}

/* 第六种方案 grid方案*/

.container {display:grid;place-items:center;}

上面代码需要写在容器上，指定为 Grid 布局。核心代码是place-items属性那一行，它是一个简写形式。

place-items:;

align-items属性控制垂直位置，justify-items属性控制水平位置。这两个属性的值一致时，就可以合并写成一个值。所以，place-items: center;等同于place-items: center center;。