CSS3--居中思路

一、水平居中

1、行内元素

如果父元素是块级元素且里面包含行内元素，则直接给父元素设置 text-align: center。

.center{
        text-align:center;
}
<div class="center">水平居中</div>

2、块级元素

2.1、定宽块级

给需要居中的块级元素添加margin:0 auto即可。

.center {
  width:200px;
  margin:0 auto;
  border:1px solid red;
}
<div class="center">水平居中</div>

2.2、不定宽块级

flex布局

<div class="parent">
    <div class="child">我是块级元素</div>
</div>

.parent {
  height: 300px;
  width: 400px;
  display: flex;
  justify-content: center;
}

grid布局

.parent{
  display:grid;
  justify-items:center; /*justify-content:center;*/
} 

absolute + transform

.parent {
  height: 300px;
  width: 400px;
  position: relative;
  background:  red;
}
.child {
  position: absolute;
  background: pink;
  left: 50%;
  transform: translateX(-50%);
}

<div class="parent">
    <div class="child">我是块级元素</div>
</div>

二、垂直居中

1、单行文本

设置line-height = height 或 padding-top=padding-bottom。

2、图片

line-height 和 vertical-align

#box{
    width: 300px;
    height: 300px;
    background: #ddd;
    line-height: 300px;
}
#box img {
    width: 200px;
    height: 200px;
    vertical-align: middle;
}

3、块级元素

3.1、绝对定位结合margin: auto

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
    width: 200px;
    height: 100px;
    background: orange;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    line-height: 100px;
}

3.2、Grid

<div id="box">
    <div class="one"></div>
    <div class="two">target item</div>
    <div class="three"></div>
</div>

#box {
    width: 300px;
    height: 300px;
    display: grid;
}

三、水平垂直居中

1、绝对定位+margin

.father {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

2、绝对定位+负边距

    div{
        width:200px;
        height: 200px;
        background:green;
        
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }

实现水平垂直，只需要同时结合水平居中和垂直居中，篇幅有限，部分相似代码方式省略。