1
<style>
*{
padding: 0;
margin: 0;
}
#row{
width: 800px;
height: 340px;
background-color: black;
padding-top: 70px;
box-sizing: border-box; /* 内容one的高度加上下padding等于父元素row的高 */
}
.one{
width: 200px;
height: 200px;
background-color: rgb(194, 194, 210);
margin: 0 auto; /* 水平居中 */
}
</style>
<body> (快捷键 #row>.one)
<div id="row">
<div class="one"></div>
</div>
</body>
2
#row{
width: 800px;
height: 340px;
background-color: black;
}
.one{
width: 200px;
height: 200px;
background-color: rgb(194, 194, 210);
padding: 70px 300px;
background-clip: content-box; //以内容为中心进行背景裁切
}
3
.one{
....
margin:0 auto;
}
<div id="row">
<div style="width: 0;height:70px"></div> 添加伪元素
<div class="one">aaa</div>
</div>
4
#row{
...
display: flex;
align-items: center; 垂直居中
justify-content: center; 水平居中
}
5
#row{
...
position: relative;
}
.one{
...
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
6
#row{
...
position: relative;
}
.one{
...
position: absolute;
transform:translate(300px,70px);
}
7
#row{
...
position: relative;
}
.one{
...
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
8
#row{
...
text-align:center;
display:table-cell;
vertical-align:middle;
}
.one{
}
9 无固定宽高
#row{ 可加宽度，和子元素宽度一致
background-color: black;
padding: 50px;
}
.one{ 可加宽高，宽度和父元素一致
background-color: rgb(194, 194, 210);
}
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
