CSS常用水平垂直居中的几种方法
- 1. 子元素相对于父元素绝对定位,子元素top,left设置50%,子元素margin-top和margin-left减去各自宽高的一半
- 2. 子元素相对父元素绝对定位,子元素top,left值为50%,transform:translate(-50%,-50%)
- 3. 子元素相对于父元素绝对定位,子元素上下左右全为0,然后设置子元素margin: auto
- 4. 子元素相对定位,子元素top,left值为50%,transform: translate(-50%, -50%);
- 5. 父元素设置弹性盒子,display:flex; justify-content:center ;align-items:center;
- 6. 父元素设置display:table-cell; vertical-align:middle; 子元素设置margin:auto。
HTML代码如下:
<div class="outer">
<div class="inner"></div>
</div>
css代码如下:
.outer {
width: 600px;
height: 600px;
border: 1px solid #f00;
}
.inner {
width: 200px;
height: 200px;
background-color: aqua;
}
1. 子元素相对于父元素绝对定位,子元素top,left设置50%,子元素margin-top和margin-left减去各自宽高的一半
.outer {
width: 600px;
height: 600px;
border: 1px solid #f00;
position: relative;
}
.inner {
width: 200px;
height: 200px;
background-color: aqua;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
2. 子元素相对父元素绝对定位,子元素top,left值为50%,transform:translate(-50%,-50%)
.outer {
width: 600px;
height: 600px;
border: 1px solid #f00;
position: relative;
}
.inner {
width: 200px;
height: 200px;
background-color: aqua;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
3. 子元素相对于父元素绝对定位,子元素上下左右全为0,然后设置子元素margin: auto
.outer {
width: 600px;
height: 600px;
border: 1px solid #f00;
position: relative;
}
.inner {
width: 200px;
height: 200px;
background-color: aqua;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
4. 子元素相对定位,子元素top,left值为50%,transform: translate(-50%, -50%);
.outer {
width: 600px;
height: 600px;
border: 1px solid #f00;
}
.inner {
width: 200px;
height: 200px;
background-color: aqua;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
5. 父元素设置弹性盒子,display:flex; justify-content:center ;align-items:center;
.outer {
width: 600px;
height: 600px;
border: 1px solid #f00;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
width: 200px;
height: 200px;
background-color: aqua;
}
6. 父元素设置display:table-cell; vertical-align:middle; 子元素设置margin:auto。
.outer {
width: 600px;
height: 600px;
border: 1px solid #f00;
display: table-cell;
vertical-align: middle;
}
.inner {
width: 200px;
height: 200px;
background-color: aqua;
margin: auto;
}