css设置元素水平垂直都居中显示
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
- margin:auto实现绝对定位元素的居中(上下左右均0位置定位;margin: auto)
width: 600px; height: 400px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto; /* 有了这个就自动居中了 */
- 使用 flex布局, 在父元素中写下面的代码子元素就会居中显示了
<div class="outer">
<div class="inner"></div>
</div>
.outer
width:100%;
height:100%;
background:#eee;
display:flex;
justify-content: center;
align-items: center;
}
.inner{
width:300px;
height:300px;
background: #fff;
border:1px solid #ccc;
}
网友评论