CSS布局--垂直水平居中
Posted veranotes
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS布局--垂直水平居中相关的知识,希望对你有一定的参考价值。
···设置两个盒子
<div class="parent">
<div class="child">
</div>
</div>
方法一:absolute
<!-- //父元素相对定位,子元素绝对定位 -->
<!-- //绝对定位盒子模型有个特点:left + right + width + padding + margin = 包含块的宽度;此时可以将left、right设置为0;padding、margin未设置是默认为0;所以将margin设置为auto,使得元素自动居中; -->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.parent{
position: relative;
width: 200px;
height: 200px;
border: 1px solid black;
}
.child{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background: pink;
}
</style>
方法二:absolute + 负margin
以上是关于CSS布局--垂直水平居中的主要内容,如果未能解决你的问题,请参考以下文章