【 CSS 】元素水平垂直居中

一、水平居中

1、对于行内元素

.content {
    width: 100%;
    text-align: center;
}

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

2、对于确定宽度的块级元素

width, margin 实现

.parent {
    width: 400px;
    background-color: silver;
}
  
.children {
    width: 200px;
  margin: 0 auto;
    text-align: center;
    border: 1px sienna solid;
}

<div class="parent">
    <div class="children">
      Hello World
    </div>
</div>

3、对于宽度未知的块级元素

方法1：设置table

.parent {
    width: 400px;
    background-color: silver;
}

.children {
    display:table;
    margin:0 auto;
    border:1px solid red;
}

<div class="parent">
    <div class="children">
      Hello World
    </div>
</div>

方法2：设置inline-block

.parent {
    width: 400px;
    background-color: silver;
    text-align: center;
}

.children {
    height: 200px;
    display:inline-block;
    border: 1px sienna solid;
}

<div class="parent">
    <div class="children">
        Hello World
    </div>
</div>

方法3：弹性盒子 display:flex

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

.children {
    height: 200px;
    background-color: sienna;
}

<div class="parent">
    <div class="children">
        Hello World
    </div>
</div>

方法4：父盒子设置相对，子盒子绝对，left、transform 移位实现

.parent {
    position: relative;
    width: 400px;
    height: 400px;
    background-color: silver;
}
.children {
    position: absolute;
    height: 200px;
    left: 50%;
    transform: translateX(-50%);
    background-color: sienna;
}

<div class="parent">
    <div class="children">
        Hello World
    </div>
</div>

二、垂直居中

1、父盒子设置相对，子盒子绝对，top、transform 移位实现

.parent {
    position: relative;
    width: 400px;
    height: 400px;
    background-color: silver;
}
.children {
    position: absolute;
    height: 200px;
    top: 50%;
    transform: translateY(-50%);
    background-color: sienna;
}

<div class="parent">
    <div class="children">
        Hello World
    </div>
</div>

2、弹性盒子 display:flex 实现

.parent {
    width: 400px;
    height: 400px;
    background-color: silver;
    display: flex;
    align-items: center;
}

.children {
    height: 200px;
    background-color: sienna;
}

<div class="parent">
    <div class="children">
        Hello World
    </div>
</div>

三、水平且垂直居中

结合上述两种方法即刻

例如：弹性盒子

.parent {
    width: 400px;
    height: 400px;
    background-color: silver;
    display: flex;
    align-items: center;
    justify-content: center;
}

.children {
    width: 200px;
    height: 200px;
    background-color: sienna;
}

<div class="parent">
    <div class="children">
        Hello World
    </div>
</div>