css(div水平垂直居中)
来源:互联网 发布:北京国税开票软件下载 编辑:程序博客网 时间:2024/05/21 10:01
<style>
html,body{
margin: 0; padding: 0;}
.box {
position: relative; /*这个可以去掉 看看效果哦,注意会有变化啊*/
width: 600px; /*宽*/
height: 400px; /*高*/
background-color: rgba(212,66,33,.86);
margin: 0 auto;
}
.Absolute-Center {
width: 50%;
height: 50%;
background-color: green;
position: absolute; top: 0; bottom: 0; left: 0; right: 0; /*css溢出法*/
margin: auto;
}
</style>
<!-- 方法一 :
绝对定位下top left right bottom 都设置0,再margin: auto
IE8+以及其他浏览器都是OK的
-->
<div class="box">
<div class="Absolute-Center" >
我是要居中的元素
</div>
</div>
<hr />
<!-- 方法二
相对定位 top:50% 再上移本身的50%
-->
<div class="box">
<div class="Absolute-Center" style="position: relative; top: 50%;-webkit-transform: translateY(-50%);margin:auto;" >
我是要居中的元素
</div>
</div>
<hr />
<!-- 方法三
设置margin-top是height值的一半的负值
-->
<div class="box">
<div class="Absolute-Center" style="width: 160px;height: 80px;top: 50%;margin-top:-40px; margin-left: auto; margin-right: auto;" >
我是要居中的元素
</div>
</div>
- css div水平垂直居中
- css(div水平垂直居中)
- div+css垂直居中和水平居中
- 【DIV+CSS】DIV背景图片水平垂直居中
- 利用CSS使Div水平垂直居中
- CSS控制DIV水平并且垂直居中
- css div的水平、垂直同时居中
- css div的水平、垂直同时居中
- css实现div水平、垂直居中
- css div的水平、垂直同时居中
- css div垂直水平居中实现
- css的div动态水平垂直居中
- css实现div垂直水平居中
- css实现div垂直水平居中
- div+css文字水平垂直居中
- div 文字垂直居中 水平居中 div css 文字垂直居中 水平居中
- div水平垂直居中
- DIV 水平垂直居中
- 理解LSTM网络【转】
- (源码阅读)Spring是如何找到URL请求对应的Controller的。
- effective C++条款二十四解读
- shell编程中常用的单目运算
- LVS-DR实现web调度模式
- css(div水平垂直居中)
- 数字证书原理
- Linux 相关笔记记录1
- Visa学习
- 网易2017春招笔试编程题 分饼干
- 使用统计学习计算选出所有牌有效且没有无效牌的概率
- 洛谷 P2668 斗地主
- 按量付费实例批量更改实例带宽
- 什么是二维数组