- {
margin: 0;
padding: 0;
list-style: none;
清除浏览器默认样式
.father1 {
width: 400px;
height: 400px;
background-color: #fc4;
position: relative;
.son1 {
width: 200px;
height: 200px;
background-color: #f44;
position: absolute;
top: 100px;
left: 100px;
/ 第一种居中方式 /
.father2 {
width: 200px;
height: 200px;
background-color: #f77;
position: relative;
.son2 {
width: 100px;
height: 100px;
background-color: #ff7;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
/ 第二种居中方式 /
定位+外边距+百分比
.father3 {
width: 200px;
height: 200px;
background-color: #0f0;
position: relative;
/ overflow: hidden; /
/ 解决margin塌陷问题 /
.son3 {
width: 100px;
height: 100px;
background-color: #77f;
position: absolute;
margin-left: 50px;
margin-top: 50px;
/ 第三种居中方式 /
定位+外边距
.father4 {
width: 100px;
height: 100px;
padding: 50px;
background-color: #f44;
.son4 {
width: 100px;
height: 100px;
background-color: #0f7;
/ 第四种居中方式 /
内边距
.father5 {
width: 100px;
height: 100px;
border: 50px solid #f444;
background-color: #f444;
.son5 {
width: 100px;
height: 100px;
background-color: #4fff;
/ 第五种居中方式 /
.six {
width: 200px;
height: 200px;
background-color: #f9f67f;
border: 100px solid #08c;
/ 第六种居中方式 /
一个元素 边框
.seven {
width: 0px;
height: 0px;
padding: 100px;
background-color: #f78;
border: 50px solid #99f4;
/ 第七种居中方式 /
一个元素 边框+内边距
.box1 {
width: 200px;
height: 200px;
background-color: #f075;
position: absolute;
z-index: 1;
.box2 {
width: 100px;
height: 100px;
background-color: #ff99;
position: absolute;
z-index: 2;
top: 50px;
left: 50px;
.father8 {
position: relative;
/ 第八种居中方式 /
3个元素 定位+层级
Original: https://www.cnblogs.com/566adsasdw55/p/16737206.html
Author: 星空丽影
Title: HTML&CSS-盒模型运用居中方式合集
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/642966/
转载文章受原作者版权保护。转载请注明原作者出处！