1.给定宽高的容器
- 将它的
margin设为自身宽高的一半。
例子：
div {
position: relative; /* 相对定位或绝对定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px; /* 外边距为自身宽高的一半 */
background-color: pink; /* 方便看效果 */
}
- 绝对定为与margin
.container{
width:300px;
height:300px;
background:pink;
position:relative;
}
.center{
width:100px;
height:100px;
background:lightgreen;
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
2.未知容器的宽高
- 利用
tansfrom的属性
例子;
div {
position: absolute; /* 相对定位或绝对定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; /* 方便看效果 */
}
- flex布局
利用flex的属性
例子:
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div {
width: 100px;
height: 100px;
background-color: pink; /* 方便看效果 */
}
<div class="container">
<div>
