html css元素的居中
1.块级元素的水平居中
html 代码:
<body>
<div class="father">
<div class="son">块级元素
<p>我是文本</p>
</div>
</div>
</body>
css代码:
.father{
width: 300px;
height: 300px;
background-color: #1d90ff;
margin: 0 auto;
}
.son{
width: 100px;
height: 100px;
/*左右两边的边距 设为自适应 就能实现块级元素的水平居中
前提是 此元素和父元素都设置了高度
*/
margin: 0 auto;
background-color: lightgreen;
}
效果: