|
直入主题：
<div class="parent">
<span class="child"></div>
</div>
1、flex 布局水平垂直居中
.parent {
display: flex;
justify-content: center;
align-items: center;
}
2、transform + position 水平垂直居中
.parent {
position: relative;
}
.child {
position: absolute;left: 50%;top: 50%;
transform: translate(-50%, -50%);
}
3、定宽块级元素水平居中
.child{
display: block;
width: 40px;
margin: 0 auto;
}
4、内联元素水平居中
.parent {
text-align: center;
}
5、内联元素垂直居中
.parent {
height:100px;
line-height:100px;
}
顺便介绍三种布局：
1、float布局（还在运用float布局的机构尽可能别去）
经过设置属性 float:left 或 float:right 让元素从左往右流动或从右往左流动，经过设置 margin 属性调节元素的位置，最后清除浮动。
2、绝对定位
给父元素设置 display:relative 给子元素设置 display:absolute 使子元素相针对父元素定位，经过设置 left/right/top/bottom 属性调节元素的位置。
3、flex布局（不可运用flex布局的机构尽可能别去）
给父元素（Flex容器）设置 display:flex；子元素（Flex项目）会默认排成一行，经过设置容器或项目的各样属性来改变项目布局的方式。
接下来用代码演示三种布局方式
HTML：
<body>
<div class="father">
<div class="a">left</div>
<div class="b">mid</div>
<div class="c">right</div>
</div>
</body>
CSS：
div {
box-sizing: border-box
}
.father {
height: 300px;
width: 600px;
border: 1px solid black;
}
.father > div {
border: 1px solid red;
width: 150px;
height: 150px;
text-align: center;
line-height: 150px;
}
要达到的效果：
1、浮动布局
.a {
float: left;
}
.b {
float: left;
margin-left: 75px;
}
.c {
float: right;
}
.father::after {
content: ;
display: block;
clear: both;
}/* 清除浮动 */
2、绝对定位
.father {
position: relative;
}
.a {
position: absolute;
}
.b {
position: absolute;
left: 225px;
}
.c {
position: absolute;
right: 0;
}
3、flex：我只要两行代码
.father{
display: flex;
justify-content:space-between;
}
| 
发表于 2024-6-30 05:57:13
