内容简介:适合子级内容为文本展示。
1. 父级容器设置成表格,子级设为行内元素。
适合子级内容为文本展示。
<!-- css -->
<style>
#parent {
height: 200px;
width: 200px;
border: 1px solid red;
display: table-cell; /* 转变成表格 */
text-align: center; /* 水平 */
vertical-align: middle; /* 垂直 */
}
#child {
background-color: blue;
color: white;
display: inline; /* 子元素设置为行内或行内块 */
}
</style>
<!-- html -->
<div id="parent">
<div id="child">内容</div>
</div>
2. 父级容器设置相对定位,子级设置绝对定位后通过外边距居中。
<!-- css -->
<style>
#parent {
height: 200px;
width: 200px;
border: 1px solid red;
position: relative; /* 设置相对定位 */
}
#child {
height: 50px;
width: 50px;
color: white;
background-color: blue;
/* 绝对定位,4 个方向设置为 0 后,margin 设为 auto */
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
<!-- html -->
<div id="parent">
<div id="child"></div>
</div>
3. 父级容器设置为弹性盒,子级设置外边距。
<!-- css -->
<style>
#parent {
height: 200px;
width: 200px;
border: 1px solid red;
display: flex; /* 父元素转换为弹性盒 */
display: -webkit-flex; /* Safari */
}
#child {
height: 50px;
width: 50px;
background-color: blue;
margin: auto;
}
</style>
<!-- html -->
<div id="parent">
<div id="child"></div>
</div>
4. 父级容器设置相对定位,子级设置绝对定位,左边距和上边距设置负一半宽度。
适合子级的宽高固定的情况。
<!-- css -->
<style>
#parent {
height: 200px;
width: 200px;
border: 1px solid red;
position: relative; /* 设置相对定位 */
}
#child { /* 子元素已知自身宽高的情况下 */
background-color: blue;
width: 50px;
height: 50px;
margin-top: -25px;
margin-left: -25px;
position: absolute;
left: 50%;
top: 50%;
}
</style>
<!-- html -->
<div id="parent">
<div id="child"></div>
</div>
5. 父级容器设置相对定位,子级设置绝对定位,通过变形属性设置水平和垂直方向负一半。
适合子级的宽高不固定的情况。
<!-- css -->
<style>
#parent {
height: 200px;
width: 200px;
border: 1px solid red;
position: relative; /* 设置相对定位 */
}
#child { /* 子元素未知自己的宽高,使用 transform 的 translate */
border: 1px solid blue;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
</style>
<!-- html -->
<div id="parent">
<div id="child">
<div id="content">
内容1
<br/>
内容2
</div>
</div>
</div>
6. 父级设置为弹性盒,设置对齐属性。
<!-- css -->
<style>
#parent {
height: 200px;
width: 200px;
border: 1px solid red;
display: flex; /* 父元素转换为弹性盒 */
display: -webkit-flex; /* Safari */
justify-content: center;/* 水平 */
align-items: center; /* 垂直 */
}
#child {
height: 50px;
width: 50px;
background-color: blue;
}
</style>
<!-- html -->
<div id="parent">
<div id="child"></div>
</div>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
XML Hacks
Michael Fitzgerald / O'Reilly Media, Inc. / 2004-07-27 / USD 24.95
Developers and system administrators alike are uncovering the true power of XML, the Extensible Markup Language that enables data to be sent over the Internet from one computer platform to another or ......一起来看看 《XML Hacks》 这本书的介绍吧!