概述
笔记学习整理
css垂直水平居中分为：
定宽居中
方法①absolute+负margin
②absolute+margin:auto
③absolute+calc
④ min-height: 100vh+flex+margin:auto
不定宽居中
①absolute + transform
②lineheight
③writing-mode
④css-table
⑤flex
⑥grid
一、定宽居中
1、定宽居中(absolute+负maigin)
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
定宽居中.father {
width: 400px;
height: 400px;
border: 1px solid blue;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: orange;
/* 1、定宽高定位：absolute + 负边距margin */
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
2、定宽居中(absolute+maigin:auto)
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
定宽高定位.wp {
border: 1px solid red;
width: 300px;
height: 300px;
position: relative;
}
.box.size {
width: 100px;
height: 100px;
}
.box {
background: green;
/*2、定宽高定位：absolute + margin:auto */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
子元素定宽高
3、定宽居中(absolute+calc)
position:absolute;
top:calc(50% - 50px);
left:calc(50% - 50px);
定宽高定位.wp {
border: 1px solid red;
width: 300px;
height: 300px;
position: relative;
}
.box.size {
width: 100px;
height: 100px;
}
.box {
background: green;
/* 3、定宽高定位：(兼容性依赖css3的calc)absolute + 计算属性calc */
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
子元素定宽高
4、定宽居中(min-height: 100vh+flex+margin:auto)
定宽居中main{
min-height: 100vh;
/* vh相对于视窗的高度，视窗高度是100vh */
/* “视区”所指为浏览器内部的可视区域大小，
即window.innerWidth/window.innerHeight大小，
不包含任务栏标题栏以及底部工具栏的浏览器区域大小。 */
display: flex;
}
div{
width: 50px;
height: 50px;
background-color: red;
margin: auto;
}
二、不定宽居中
1、不定宽高居中：absolute+transform(依赖translate 2d的兼容性)
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
不定宽高定位.wp {
border: 1px solid red;
width: 300px;
height: 300px;
position: relative;
}
.box {
background: green;
/* 1、不定宽高居中：(依赖translate 2d的兼容性)absolute+transform */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
子元素不定宽高
2、不定宽高居中：lineheight
不定宽高定位.wp {
border: 1px solid red;
width: 300px;
height: 300px;
/* 2、不定宽高居中 */
text-align: center;
line-height: 300px;
font-size: 0px;
}
.box {
/* 2、不定宽高居中lineheight */
display: inline-block;
vertical-align: middle;
line-height: inherit;
text-align: left;
font-size: 16px;
}
子元素不定宽高
3、不定宽高居中
不定宽高定位.wp {
border: 1px solid red;
width: 300px;
height: 300px;
/* 3、不定宽高居中css-table */
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box {
/* 3、 */
display: inline-block;
}
子元素不定宽高
4、不定宽高居中flex
不定宽高定位.wp {
border: 1px solid red;
width: 300px;
height: 300px;
/* 4、不定宽高居中flex */
display: flex;
justify-content: center;
align-items: center;
}
子元素不定宽高
5、不定宽高居中grid (css3网格系统grid兼容性不如flex 不推荐使用)
display: grid;
justify-self: center;
align-self: center;
不定宽高定位.wp {
border: 1px solid red;
width: 300px;
height: 300px;
/* 5、grid */
display: grid;
}
.box {
/* 5、不定宽高居中grid(兼容性不如flex 不推荐使用) */
justify-self: center;
align-self: center;
}
子元素不定宽高
这边通过网上学习，总结了以上几种方法，便于日后遗忘。
最后
以上就是笑点低硬币为你收集整理的css实现水平居中的几种方法,css实现水平垂直居中的几种方法的全部内容，希望文章能够帮你解决css实现水平居中的几种方法,css实现水平垂直居中的几种方法所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复