学习大纲
- 水平居中
- 垂直水平居中
水平居中
<div class="parent">
<p class="child">水平居中</p>
</div>
方法一
- 优点:兼容性好，甚至可以兼容ie6、ie7
- 缺点:child里的文字也会水平居中，可以在.child添加
text-align:left;还原
.parent {
text-align: center;
}
.child {
display: inline-block;
}
方法二
- 优点：只设置了child，ie8以上都支持
- 缺点：ie6、ie7不支持将div换成table
.parent {
}
.child {
display: table;
margin: 0 auto;
}
方法三
- 优点:居中元素不会对其他的产生影响
- 缺点:transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
方法四
- 优点: 简单快捷
- 缺点: 低版本浏览器(ie6 ie7 ie8)不支持
.parent {
display: flex;
}
.child {
margin: 0 auto;
}
方法五
- 优点:简单快，设置parent即可
- 缺点:低版本浏览器(ie6 ie7 ie8)不支持
.parent {
display: flex;
justify-content: center;
}
.child {
}
方法六
- 使用grid网格布局
.parent {
/*核心代码*/
display: grid;
}
.child {
justify-self: center;
}
水平垂直居中
<div class="parent">
<p class="child">child</p>
</div>
方法一
- absolute + 负margin值
- 父元素设置相对定位，子元素设置绝对定位，margin值设置为负数
- 注意：子元素需要定宽高
.parent {
/*核心代码*/
position: relative;
height: 200px;
width: 200px;
border: 1px solid #f00;
}
.child {
/*核心代码*/
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
width: 100px;
height: 100px;
background: #f00;
}
方法二：
- absolute + margin auto
- 父元素设置相对定位，子元素设置绝对定位，margin值设置auto，四个方向设置为0
- 注意：子元素需要定宽高
.parent {
/*核心代码*/
position: relative;
height: 200px;
width: 200px;
border: 1px solid #f00;
}
.child {
/*核心代码*/
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background: #f00;
}
方法三：
- absolute + calc
- 父元素设置为相对定位，父元素设置绝对定位，使用ralc
- 注意：子元素需要定宽高
.parent {
/*核心代码*/
position: relative;
height: 200px;
width: 200px;
border: 1px solid #f00;
}
.child {
/*核心代码*/
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
width: 100px;
height: 100px;
background: #f00;
}
方法四
- absolute + transform
- 父元素设置为相对定位，父元素设置绝对定位，使用transform
- 注意：子元素不需要定宽高
.parent {
/*核心代码*/
position: relative;
height: 200px;
width: 200px;
border: 1px solid #f00;
}
.child {
/*核心代码*/
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #f00;
}
方法五
- writing-mode
- 使用writing-mode垂直水平居中
- 子元素（.item）不需要定宽高
<div class="parent">
<ul class="child"><li class="item">item</li>
</ul></div>
/* css */
.parent {
/*核心代码*/
writing-mode: vertical-lr;
text-align: center;
height: 200px;
width: 200px;
border: 1px solid #f00;
}
.child {
/*核心代码*/
writing-mode: horizontal-tb;
display: inline-block;
text-align: center;
width: 100%;
}
.item {
/*核心代码*/
display: inline-block;
margin: auto;
text-align: left;
background: #f00;
}
方法六
- line-height
- 父元素定好宽高，使用line-height水平对齐
- 子元素可以不设置宽高
.parent {
/*核心代码*/
width: 200px;
line-height: 200px;
text-align: center;
border: 1px solid #f00;
}
.child {
}
方法七
- table
- 父元素设置table-cell
- 子元素可以不用设置宽高
.parent {
/*核心代码*/
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
border: 1px solid #f00;
}
.child {
/*核心代码*/
display: inline-block;
background: #f00;
}
方法八
- 使用flex
- 子元素可以不用设置宽高
.parent {
/*核心代码*/
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
border: 1px solid #f00;
}
.child {
background: #f00;
}
方法九
- 使用grid网格布局
- 子元素可以不用设置宽高
.parent {
/*核心代码*/
display: grid;
width: 200px;
height: 200px;
border: 1px solid #f00;
}
.child {
/*核心代码*/
align-self: center;
justify-self: center;
background: #f00;
}
随时随地看视频
