一.行内元素水平居中
方法1.text-align:center；
代码演示
<style>
.parent {
background-color: red;
text-align: center;
height: 40px;
}
</style>
</head>
<body>
<!-- 行内元素居中 水平居中 给父元素设置也可以因为有继承性 -->
<div class="parent">
<span class="child">行内元素水平居中</span>
</div>
</body>
方法2.width:fit-content；
代码演示
<style>
.box {
background-color: red;
}
.parent {
background-color: pink;
/* 此时父元素的宽度会适应子元素的宽度 然后在父元素身上加上margin 即可水平居中 */
width: fit-content;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div class="parent">
<span class="child">行内元素水平居中</span>
</div>
</div>
</body>
二.行内元素垂直居中
方法1.line-height(只针对单行文本 多行文本不生效)
<style>
.box {
width: 200px;
line-height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<span class="child">垂直居中</span>
</div>
</body>
三.块级元素水平居中
方法1.margin：0 auto；
代码演示
扫描二维码关注公众号，回复：
12699910 查看本文章
<style>
.parent {
background-color: red;
}
.child {
width: 150px;
margin: 0 auto;
background-color: pink;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">块级元素水平居中</div>
</div>
</body>
四.实现水平垂直居中
方法1.定位来实现
代码演示
<style>
.parent {
position: relative;
height: 200px;
background-color: red;
}
.child {
position: absolute;
top: 50%;
left: 50%;
/* 减去子元素高宽自身的一半 */
margin-top: -50px;
margin-left: -50px;
height: 100px;
width: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
方法2.定位+transform
代码演示
<style>
.parent {
position: relative;
height: 200px;
background-color: red;
}
.child {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
/* 用transform 可以动态检测到子元素的宽高了 如果子元素宽高改变了我们不用担心了 */
transform: translate(-50%, -50%);
background-color: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
方法3.定位+margin
代码演示
<style>
.parent {
position: relative;
height: 200px;
background-color: red;
}
.child {
width: 100px;
height: 100px;
/* 原理就是让top left right bottom 设置为0 此时子元素会填充父元素所有可用空间 就有了可分配空间 然后在设置margin水平方向居中即可 */
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
margin: auto;
background-color: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
方法4.padding来实现
代码演示
<style>
.parent {
/* 父元素没有设置宽高 子元素的宽高就是父元素的宽高*/
background-color: red;
padding: 20px;
}
.child {
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
方法5.flex来实现
代码演示
<style>
.parent {
height: 200px;
display: flex;
/* 垂直居中 */
align-items: center;
/* 水平居中 */
justify-content: center;
background-color: red;
}
.child {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
