CSS实现居中样式

• 水平居中

• 行内元素水平居中

• 方法：用text-align：center实现

html代码部分

<div class="box1">
    行内元素水平居中
</div>

css代码部分

.box1{
    width: 200px;
    height: 200px;
    background: tomato;
    text-align: center;
}   

• 块元素样式水平居中

• 方法一：子元素利用margin： 0 auto；实现水平居中
  html代码部分

<div class="box2">
    <div class="boy2">块元素水平居中</div>
</div>

css代码部分

.box2{
    width: 200px;
    height: 200px;
    background: tomato;
}
.boy2{
    width: 100px;
    height: 100px;
    background: skyblue;
    margin: 0 auto;
}

• 方法二：将子元素变为table，再利用margin实现

html代码部分

<div class="box2">
    <div class="boy2">块元素水平居中</div>
</div>

css代码部分

.box3{
    width: 200px;
    height: 200px;
    background: tomato;
    
}
.boy3{
    width: 100px;
    height: 100px;
    background: skyblue;
    display: table;
    margin: 0 auto;
}

方法三：将子元素设置成inline-block，父元素设置为text-align: center
html代码部分

<div class="box4">
    <div class="boy4">块元素水平居中</div>
</div>

css代码部分

.box4{
    width: 200px;
    height: 200px;
    background: tomato;
    text-align: center;
}
.boy4{
    width: 100px;
    height: 100px;
    background: skyblue;
    display: inline-block;
}

方法四：利用弹性盒实现水平居中
html代码部分

<div class="box8">
    <div class="boy8">弹性盒水平居中</div>
</div>

css代码部分

.box8{
    width: 200px;
    height: 200px;
    background: tomato;
    display: flex;
    justify-content:center;
}
.boy8{
    width: 100px;
    height: 100px;
    background: skyblue;
}

• 垂直居中

• 行内元素垂直居中

方法：设置与高度相同的行高
html代码部分

<div class="box5">
     行内垂直居中
</div>

css代码部分

.box5{
    width: 200px;
    height: 200px;
    background: tomato;
    line-height: 200px;
}

• 块元素垂直居中

方法一：父元素设置成table-cell，再用vertical-align:middle
html代码部分

<div class="box6">
    <div class="boy6">块元素垂直居中</div>
</div>

css代码部分

.box6{
    width: 200px;
    height: 200px;
    background: tomato;
    display: table-cell;
    vertical-align: middle;
}
.boy6{
    width: 100px;
    height: 100px;
    background: skyblue;
}

方法二：弹性盒实现垂直居中
html代码部分

<div class="box7">
    <div class="boy7">弹性盒块元素垂直居中</div>
</div>

css代码部分

.box7{
    width: 200px;
    height: 200px;
    background: tomato;
    display: flex;
    align-items: center;
}
.boy7{
    width: 100px;
    height: 100px;
    background: skyblue;
}

• 水平垂直居中

水平居中记一下利用position的实现方法，剩余的有时间再补上吧，嘻嘻嘻。

方法：position设置0加margin的方法
html代码部分

 <div class="box9">
    <div class="boy9">margin,绝对定位和0实现居中</div>
 </div>

css代码部分

.box9{
    width: 200px;
    height: 200px;
    background: tomato;
    position: relative;
}
.boy9{
     width: 100px;
    height: 100px;
    background: skyblue;
    margin: auto; 
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;   
}

后记

CSS居中的方法肯定不止这几种，只是把最常用的写了一下，后面学到其他的会继续补充。