目录
1、(子元素居中)父:text-align:center;(行内元素)
2、(自己居中)自己:margin:0 auto;(块级元素)
3、(子元素居中)(子)display:inline-block; (父)text-align:center; (多块级元素)
4、(子元素居中)(父)display:flex;justify-content:center;
1、(inline- )单行文本自己:line-hight:盒子高度;
3、flex换主轴的方式:父元素:display:flex;flex-direction:column;justify-content:center;
4、精灵元素:在父容器内放一个100%高度的伪元素,让文本和伪元素垂直对齐
5、(已知子元素高度):绝对定位50%;margin-top:子元素高度的一半
6、(子元素未知高度):绝对定位50%;transform:子元素高度的50%
1、父相子绝 + margin (已知子元素高度):宽高各移一半
2、父相子绝 + transform 移动 (未知子元素高度)
6、父相子绝 + margin: auto; 上下左右:0;
7、padding+margin-top:(父height-子heigh)/2
一、水平居中:
1、(子元素居中)父:text-align:center;(行内元素)
文本在盒子中水平居中:text-align:center; (用于inline、inline-block、inline-table、inline-flex)
2、(自己居中)自己:margin:0 auto;(块级元素)
盒子在父盒子中水平居中:margin:0 auto; (用于block)
3、(子元素居中)(子)display:inline-block; (父)text-align:center; (多块级元素)
子元素们:display:inline-block; 父元素:text-align:center; (如果一行中有两个及以上的块级元素,将父元素设text-align)
4、(子元素居中)(父)display:flex;justify-content:center;
多块级元素水平居中:父元素:display:flex;justify-content:center;
二、垂直居中:
1、(inline- )单行文本自己:line-hight:盒子高度;
2、利用表:
3、flex换主轴的方式:父元素:display:flex;flex-direction:column;justify-content:center;
4、精灵元素:在父容器内放一个100%高度的伪元素,让文本和伪元素垂直对齐
<head>
<style>
.d1 {
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
.d1::before {
content:"";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.d2 {
width: 100px;
height: 50px;
background-color: pink;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">as</div>
</div>
</body>
5、(已知子元素高度):绝对定位50%;margin-top:子元素高度的一半
子元素 绝对定位元素距离顶部50%,并设置margin-top向上偏移元素高度的一半 (块级元素)
<head>
<style>
.d1 {
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
.d2 {
position: absolute;
width: 100px;
top:50%;
height: 100px;
margin-top:-50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">as</div>
</div>
</body>
6、(子元素未知高度):绝对定位50%;transform:子元素高度的50%
子元素 绝对定位元素距离顶部50%,并用transform属性向Y轴反向偏移50%(部分浏览器存在兼容性问题)
<head>
<style>
.d1 {
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
.d2 {
position: absolute;
width: 100px;
top:50%;
transform: translateY(-50%);
background-color: pink;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">as</div>
</div>
</body>
三:水平垂直居中:
1、父相子绝 + margin (已知子元素高度):宽高各移一半
margin-left 和 margin-top 分别是宽高的一半
.fa {
width: 300px;
height: 200px;
border: 1px solid #000;
position: relative;
}
.son {
width: 100px;
height: 50px;
position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -25px;
}
<div class="fa">
<div class="son"></div>
</div>
2、父相子绝 + transform 移动 (未知子元素高度)
x和y轴各移动宽高的百分之50%
.div1 {
width: 500px;
height: 500px;
background-color: red;
position: relative;
}
.div2 {
height: 200px;
width: 200px;
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="div1">
<div class="div2">
</div>
</div>
3、利用flex,主/纵轴都设为center
.d1 {
width: 300px;
height: 200px;
border: 1px solid #000;
display: flex;
justify-content: center; /*主轴 */
align-items: center; /*纵轴 */
}
.d2 {
width: 100px;
height: 100px;
background-color: pink;
}
<body>
<div class="d1">
<div class="d2">as</div>
</div>
</body>
4、用flex: 弹性盒子+margin:auto;
.fa {
width: 300px;
height: 200px;
border: 1px solid #000;
display: flex;
}
.son {
width: 20px;
height: 20px;
background-color: pink;
margin: auto;
}
<div class="fa">
<div class="son"></div>
</div>
5、屏幕上
此方法十分常用,常规的登录及注册页面都需要用到。要保证较好的兼容性,还需要用到表布局。
6、父相子绝 + margin: auto; 上下左右:0;
(如果子元素没有设置高度,那么子元素的高度会被拉伸至父元素的高度)
.fa {
width: 500px;
height: 500px;
background-color: purple;
position: relative;
}
.sn {
width: 300px;
height: 300px;
background-color: yellow;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
(如果子元素没有设置高度,那么子元素的高度会被拉伸至父元素的高度)
}
<div class="fa">
<div class="sn"></div>
</div>
7、padding+margin-top:(父height-子heigh)/2
.fa {
width: 500px;
height: 400px;
background-color: red;
box-sizing: border-box;
padding-top: 1px; /*不写这个的话,无法垂直居中,因为父 子元素之间没有任何东西,会外边距合并,可以用padding-top和box来解决,更多解决方案在盒子模型里 */
}
.son {
width: 300px;
height: 200px;
background-color: blue;
margin: 0 auto;
margin-top: 100px;
}
<div class="fa">
<div class="son"></div>
8、利用grid (兼容性较差,不推荐)
<head>
<style>
.d1 {
width: 300px;
height: 200px;
border: 1px solid #000;
display: grid;
}
.d2 {
width: 100px;
height: 100px;
background-color: pink;
margin: auto;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">as</div>
</div>
</body>
垂直水平居中:
1、position+tranform
.fa {
positon:relative;
}
.son{
position:absolute;
left:50%;
right:50%;
transform:translate(-50%,-50%)
}2、postion+margin:宽高各移一半
.fa{
position:relative;
}
.son{
position:absolute;
left:50%;
top:50%;
margin-left:-父元素宽度的一半px;
margin-top:-父元素高度的一半px;
}3、margin-top:(父height-子heigh)/2
.fa {
box-sizing:border-box;
padding-top:1px;
}
.son {
margin:0 auto;
margin-top:(父height-子heigh)/2}
4、positon+margin
.fa{
positon:relative;
}
.son{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
5、flex
.fa {
display:flex;
justify-content:center;
align-items:center;
}6、flex+margin:auto
.fa {
display:flex;
}
.son{
margin:auto;
}