行内元素

像段落中的文本，直接设置文本对齐属性为居中即可。

text-aligh: center;

固定宽度的块级元素

1. 设置margin左右为auto

<style>
.box1 {
   width: 1000px;
   margin: 0 auto;
}
</style>

<div class="wrapper">
    <div class="box1">
    这里是文字
    </div>
</div>

2. 绝对定位和transform

.box1 {
    width: 800px;
    position: absolute;
    left: 50%; 
    transform: translateX(-50%); //x轴方向向左偏移元素自身宽度的50%;
}

设置元素块为绝对定位，left值设置为50%，则元素块整体向右偏移了50%，再往左调整元素本身宽度的二分之一。

3. 绝对定位和margin

.box1 {
    position: absolute;
    width: 200px;
    top: 0;
    right: 0;
    /* bottom: 0; */
    left: 0;
    margin: auto;
}

若设置bottom:0;则元素高度充满容器，若不设置，则为元素本身的高度；

不定宽的块级元素

1. 绝对定位和transform:

.box1 {
    position: absolute;
    left: 50%; 
    transform: translateX(-50%); //x轴方向向左偏移元素自身宽度的50%;
}

2. flex布局一

.wrapper {
     display: flex;
     flex-direction: column;
 }
.box1 {
     align-self:center;
}

3. flex布局二

.wrapper {
     display: flex;
}
 .box1 {
     margin: auto;
}