css垂直居中
类别:Web前端 浏览量:816
时间:2015-4-25 css垂直居中
css垂直居中方式一、绝对定位
.box4 span{
width: 50%;
height: 50%;
background: #000;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
方式二、table-cell
.box1{
display: table-cell;
vertical-align: middle;
text-align: center;
}
方式三、绝对定位和负边距
.box3{position:relative;}
.box3 span{
position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;
text-align: center;
}
方式四、display:inline-block
.box7{
text-align:center;
font-size:0;
}
.box7 span{
vertical-align:middle;
display:inline-block;
font-size:16px;
}
.box7:after{
content:'';
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
方式五、line-height
将line-height设置为与li的高度相同就可以居中
<style type="text/css">
.con_li{
width:400px;
height:300px;
border:1px solid #777;
text-align:center;
display:table-cell;
vertical-align:middle;
background:red;
color:#fff;
line-height:300px;
}
</style>
<li class="con_li">
测试内容ddddddddddd
</li>
方式六、CSS3中的Flexbox
.box2{
display: flex;
justify-content:center;
align-items:Center;
}
标签:css居中
热门推荐
- ftp服务器怎么搭建linux(Linux下使用vsftp搭建FTP服务器附参数说明)
- iis搭建网站的地址(IIS站点所有文件直接下载 强制下载)
- vue虚拟滚动条(vue轻松实现虚拟滚动的示例代码)
- thinkphp5开发小程序后台(PHP小程序支付功能完整版基于thinkPHP)
- 怎么看mysql有没有外键约束(MySQL外键约束的实例讲解)
- php全栈之路教程(PHP进阶学习之依赖注入与Ioc容器详解)
- javascript中window对象
- jquery实现标签输入功能
- python高德地图可视化(利用python和百度地图API实现数据地图标注的方法)
- 怎么用docker中的mysql连接数据库(连接docker里面的mysql失败解决方法)