本文都以父包裹子来设置。
水平居中
行内元素
- 父级使用 text-align:center
<div id = 'wrap'>
<span>居中</span>
</div>
#wrap{
background-color: burlywood;
text-align: center;
height: 200px; //不设置行高 父级仅撑开
width: 200px;
}
块类元素
一:将子类设置为行内元素: display : inline 或者 inline-block , 父类再使用 text-align:center
二:简单粗暴: 宽高对半
注意此方法太依赖宽高。
三:margin: 0 auto ; (设置之后,盒子会根据父级元素实现水平居中)
此方法应用元素必须设置宽高。
#father{
background-color: burlywood;
text-align: center; //父级不设宽高,子元素将撑起父元素
}
#son{
background-color: rgb(218, 106, 32);
width: 100px;
height: 100px;
margin: 0 auto;
}
四:父相子绝 定位
父相( relative )子绝( absolute )为前提。(父绝效果一样,不知道是不是在复杂的布局下父绝会影响)
1.left:50% + margin-left: - (子元素宽度一半);起效前提需已知子元素宽。
#son{
position: absolute;
background-color: rgb(218, 106, 32);
width: 100px;
height: 100px;
left:50%; /*将元素左边界移到父级中心*/
margin-left:-50px; /*将子元素中心对齐父中心*/
}
2. 不需要知道宽高。
#son{
position: absolute;
background-color: rgb(218, 106, 32);
height: 100px;
left:50%; /*将元素左边界移到父级中心*/
transform: translateX(-50%);
}
五:Flex布局
关键代码:根据需要可设置父、子宽高。 不设置宽高,父被子元素撑开。
#father{
display: flex;
justify-content: center;
}
六:Grid布局
#father{
display: grid;
justify-content: center;
}
垂直居中
一、同样不适用又粗暴:已知宽高对半
二、子类为行内元素: line-height 等于父类高度
注意:仅支持单行文本、局限性大。
span{
background-color: rgb(218, 106, 32);
line-height: 200px;
}
三、父:table-cell + vertical-align:middle;
支持多行文本
#father{
display: table-cell;
vertical-align: middle;
}
四、父相子绝 定位
通用版,子元素不需要知道高度。
#father{
position: relative;
}
.son{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
子元素已知高度
.son{
position: absolute;
height: 100px;
top: 50%;
margin-top: -50px;
}
五:Flex布局
#father{
display: flex;
align-items: center;
}
六:Grid布局
#father{
display: grid;
align-items: center;
}
七:writing-mode
writing-mode属性定义不同的书写模式
#father{
width: 400px;
height: 200px;
writing-mode: vertical-lr;
text-align:center;
}
.son{
display: inline-block;
}
水平垂直居中
一、Flex
#father{
display: flex;
align-items: center;
justify-contents: center;
}
二、Grid
#father{
display: grid;
align-items: center;
justify-contents: center;
}
三、父相子绝,已知宽高:top、left、bottom、right:0 + margin:auto;
#father{
position: relative;
width: 400px;
height: 200px;
}
.son{
position: absolute;
height: 100px;
width:100px;
top:0;
bottom: 0;
right: 0;
left:0;
margin:auto;
}
四:父相子绝 + left、top:50% + transfom
通用版本: 不需要知道宽高。
.son{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
已知宽高,可使用左右的margin值为 -(元素宽高一半),上面有类似的步骤,这儿就不再贴代码了。
五:父相子绝+ calc
calc() 函数用于动态计算长度值。
● 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
#father{
position: relative;
width: 400px;
height: 200px;
}
.son{
position: absolute;
height: 100px;
width:100px;
top:calc(50% - 50px);
left:calc(50% - 50px);
}
六:writing-mode属性
此方法将居中块包裹在两个容器内,分别给容器设置水平书写与垂直书写模式,再结合text-align定义居中模式实现水平垂直居中。
<div id = 'father'>
<div id = 'wrap'>
<div class = 'son'>居中居中</div>
</div>
</div>
#father{
writing-mode: vertical-lr;
text-align: center;
width: 400px;
height: 200px;
}
#wrap{
writing-mode: horizontal-tb;
display: inline-block;
text-align: center;
width: 100%;
}
.son{
display: inline-block;
margin: auto;
text-align:center;
}
若想实现橘色背景有高度,在wrap处设置line-height高度即可。
七:采用table-cell
兼容性还不错,不需要宽高已知。
#father{
display: table-cell;
width: 400px;
height: 200px;
text-align:center;
vertical-align: middle;
}
.son{
display: inline-block;
}
以上为参考这两个博客:https://blog.csdn.net/weixin_37580235/article/details/82317240
https://yanhaijing.com/css/2018/01/17/horizontal-vertical-center/
自己重新回忆、整理了一遍,如有不足望大佬们指出~ 小菜鸡感激不尽~