css 元素水平垂直居中

总结

1、元素已知宽高： position(left:50%,top:50%) + margin移动50%

2、元素未知宽高： position(left:50%,top:50%) + transform(translate(-50%,-50%))

3、元素未知宽高： position(left:0,top:0,right:0,bottom:0) + margin:auto

4、元素未知宽高（flex布局）：父元素设置属性， display: flex; justify-content: center; align-items: center;

5、grid布局

6、伪类 ::before + vertial-align:middle

7、元素未知宽高（table-cell布局）：
父元素设置为display:table
中间层为display:table-cell; vertical-align: middle;text-align: center;
内层为display:inline-block;

方法一 元素已知宽高 position+margin,移动50%

• 父元素设置为：position: relative;
• 子元素设置为：position: absolute; 距上50%，据左50%，然后减去元素自身宽高距离的一半就可。

<div class="box">
    <div class="content"></div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    position: relative;
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
}

方法二 元素未知宽高 position+margin:auto

• 父元素设置为：position: relative;
• 子元素设置为：position: absolute; 距上0，距下0，距左0，距右0，然后margin:auto即可

<div class="box">
     <div class="content"></div>
</div>

.box{
   width:500px;
   height: 400px;
   position: relative;
   border:1px solid #000;
}
.content{
   width: 50px;
   height: 50px;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   background: red;
}

方法三 position + transform 元素未知宽高

<div class="box">
    <div class="content">
    </div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    position: relative;
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

方法四 flex布局

<div class="box">
    <div class="content"></div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    display: flex;//flex布局
    justify-content: center;     //使子项目水平居中
    align-items: center;     //使子项目垂直居中
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
}

方法五 grid布局

.parent { 
	display: grid; 
}
.child { 
	justify-self: center; 
	align-self: center; 
}

<div class="parent">
	<div class="child"></div>
</div>

方法六 伪类

.parent {
    width: 500px;
	height: 500px;
	border: 1px solid red;
	text-align: center;
}
.parent::before {
	content: "";
	display: inline-block;
	width: 0px;
	height: 100%;
	vertical-align: middle;
}

.child {
	width: 50%;
	height: 200px;
	border: 1px solid red;
	display: inline-block;
	vertical-align: middle;
}

<div class="parent">
	<div class="child"></div>
</div>

方法七 table-cell布局

因为table-cell相当于表格的td，td为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置display: inline-block;

• 设置外围为display:table
• 设置中间层为display:table-cell; (使用这个，则默认内部元素为inline元素，而inline没有高度，所以内部嵌套层必须设置display:inline-block)
• 设置内层为display:inline-block;

<div class="box">
    <div class="content">
		<div class="inner"></div>
	</div>
</div>

.box {
    background-color: #FF8C00; 
	width: 300px;
	height: 300px;
	display: table;   /*第一步,table*/
}

.content {
	background-color: #F00; 
	display: table-cell;   /*第二步,table-cell*/
	vertical-align: middle;  /*垂直居中*/
	text-align: center;      /*水平居中*/
}

.inner {
	background-color: #000; 
	display: inline-block;   /*设置为行内块级元素*/
	width: 20%;
	height: 20%;
}

参考链接 https://blog.csdn.net/u014597198/article/details/89841199