版权声明：本文为CSDN博主「杜媛媛」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_37580235/article/details/82317240
水平居中
●行内元素
实现行内元素的水平居中，分两种情况讨论：
①父级元素是块级元素：直接给父级元素添加text-align:center
②父级元素是行内元素：给父级元素设置display:block（以块级元素显示）或者display:inline-block（以行内块级元素显示），再给父元素添加text-align:center
●块级元素
方案一：（两种情况）
①父级元素设置了宽度：为需要居中的块级元素设置margin:0 auto
②父级元素没有设置宽度：为需要居中的块级元素设置display:block或者display:inline-block，再给父级元素设置text-align:center
方案二：使用定位属性（两种情况）
①父级元素设置了宽度：设置父级元素为相对定位position:relative，需要居中的元素设置position:absolute，然后再设置子元素的位置left:50%和margin-left:-需要居中元素宽度的一半，margin-left可用CSS3新增属性代替transform:translateX(-50%)
②父级元素没有设置宽度：设置父级元素为相对定位position:relative，需要居中的元素设置position:absolute，然后再设置子元素的位置left:50%和transform:translateX(-50%)
方案三：使用flexbox弹性布局
只需要给需要居中的元素的父级元素添加display: flex和justify-content: center，此方案不管父级元素的宽度设置与否都适用
垂直居中
●单行的行内元素
设置需要居中的行内元素的行高等于父级元素的高度：line-height: 父级元素的高度
●多行的行内元素
设置父级元素display:table-cell（元素以单元格形式显示）和vertical-align-middle（水平居中）
●块级元素
方案一：使用定位属性
①父级元素设置了高度：设置父级元素为相对定位position:relative，需要居中的元素设置position:absolute，然后再设置子元素的位置top:50%和margin-top:-需要居中元素高度的一半，margin-left可用CSS3新增属性代替transform:translateY(-50%)
②父级元素没有设置高度：设置父级元素为相对定位position:relative，需要居中的元素设置position:absolute，然后再设置子元素的位置Top:50%和transform:translateY(-50%)
方案二：使用flexbox弹性布局
只需要给需要居中的元素的父级元素添加display: flex和align-items: center，此方案不管父级元素有没有设置高度都可适用
水平垂直居中
●已知高度和宽度的元素
方法一：给父级元素设置position:relative，给需要居中的元素设置position:absolute和top:0; bottom：0; left:0; right:0; margin: auto;
方法二：给父级元素设置position:relative，给需要居中的元素设置position:absolute和left: 50%; top: 50%; margin-left: -需要居中元素宽度的一半px; margin-top: -需要居中元素高度的一半px;
●未知高度和宽度的元素
方案一：使用定位属性
给父级元素设置position:relative，给需要居中的元素设置position:absolute和left: 50%; top: 50%; transform: translate(-50% -50%);
方案二：使用flex布局实现
给父级元素设置display:flex和justify-content: center; align-items: center;
