常用的几种水平垂直居中方式(按受用几率来写)
来源:互联网 发布:ees热力学计算软件 编辑:程序博客网 时间:2024/05/17 05:00
常用的几种水平垂直居中方式(按受用几率来写)
第一种方法:flex布局
主要代码:flex;align-items: center;justify-content: center
第二种方式:flex定位
主要代码:display:flex;margin:auto
第三种方式:position+margin
主要代码:position定位 margin移位
第四种方式:diaplay:table-cell定位
主要代码:diaplay:table-cell
第五种方式:position+transform
主要代码:position+transform
第六种方式:position
主要代码:position定位
第一种方法:flex布局(表示这种方式布局是最流行的)
<div class="wrap">
<div class="center"></div>
</div>
.wrap {
background: yellow;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.center {
background: green;
width: 100px;
height: 100px;
}
第二种方式:flex定位(最简洁的方式)
<div class="wrap">
<div class="center"></div>
</div>
.wrap {
background: yellow;
width: 200px;
height: 200px;
display: flex;
}
.center {
background: green;
width: 100px;
height: 100px;
margin: auto;
}
第三种方式:position+margin(常用方式,兼容性强)
<div class="wrap">
<div class="center"></div>
</div>
.wrap {
width: 200px;
height: 200px;
background: yellow;
position: relative;
}
.wrap .center {
width: 100px;
height: 100px;
background: green;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
第四种方式:diaplay:table-cell定位(不怎么常用,表示比较难用)
<div class="wrap">
<div class="center"></div>
</div>
.wrap{
width: 200px;
height: 200px;
background: yellow;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.center{
display: inline-block;
vertical-align: middle;
width: 100px;
height: 100px;
background: green;
}
第五种方式:position+transform
<div class="wrap">
<div class="center"></div>
</div>
.wrap {
position: relative;
background: yellow;
width: 200px;
height: 200px;}
.center {
position: absolute;
background: green;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
width: 100px;
height: 100px;
}
第六种方式:position
<div class="wrap">
<div class="center"></div>
</div>
.wrap {
background: yellow;
width: 200px;
height: 200px;
position: relative;
}
/**方法一**/
.center {
background: green;
position: absolute;
width: 100px;
height: 100px;
left: 50px;
top: 50px;
}
/**方法二**/
.center {
background: green;
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left:-50px;
margin-top:-50px;
}
- 常用的几种水平垂直居中方式(按受用几率来写)
- 水平垂直居中的几种方式
- css垂直水平居中的几种常用方案
- CSS几种常用水平垂直居中的方法
- 水平垂直居中的几种写法
- 水平垂直居中的几种写法
- 水平垂直居中的几种写法
- 水平垂直居中的几种写法
- 水平垂直居中的几种写法
- 水平垂直居中的几种方法
- 水平垂直居中的几种方法
- HTML几种设置水平居中和垂直居中的方式
- html里元素水平居中和垂直居中的几种方式
- 垂直水平居中的方式
- div盒子水平居中垂直居中的几种方法
- 垂直居中的几种方式
- css垂直居中的几种方式
- 实现垂直居中的几种方式
- 幸运三角形
- Windows下的bat原来可以为我们做很多
- centos安装字体
- JVM内存模型&内存溢出&垃圾回收
- 九点圆定理证明技巧
- 常用的几种水平垂直居中方式(按受用几率来写)
- sizeof和strlen的区别比较
- Android Webview加载外部html时选择加载本地的js,css等资源文件
- Opencv 学习笔记
- JVM相关知识整理
- leetcode 447. Number of Boomerangs
- C#网络编程TCP通信实例程序简单设计
- shader博客
- 新手创建Wicket遇到的一些问题