元素不定宽在页面上面,水平垂直居中

如果你曾经研究过图片水平垂直居中的方法,那么下面这几个方法你肯定知道

下面介绍的方法主要是利用display:inline-block;让元素变为行内块元素,利用vertical-align:middle来实现垂直居中,利用父元素的text-align:center;实现水平居中。

一、表格方法
表格本来对立面的内容是垂直居中的,所以用表格来做很适合。但是它里面的内容是行内元素才行,所以下面的代码就可以实现。
<style>
*{margin:0px; padding:0px;}
table {position:absolute; width:100%; height:100%; text-align:center; background:rgba(0,0,0,0.5);}
.test {background:red; display:inline-block;}
</style>
<table>
<tr>
<td>
<div class="test">
水平垂直居中了吧<br>
两行文字哦
</div>
</td>
</tr>
</table>

在css里面有个display:table-cell;属性值可以让元素渲染为表格单元格,就可以轻松实行让子元素水平垂直居中了,自己试下
<style>
.wrap {display:table-cell; width:300px; height:300px; text-align:center; vertical-align:middle; background:rgba(0,0,0,0.5);}
.test {background:red; display:inline-block;}
</style>
<div class="wrap">
<div class="test">
水平垂直居中了吧<br>
两行文字哦
</div>
</div>

二、利用vertical-align:middle
这个方法目前是我的最爱,因为下面介绍的兼容性不是很好
这个是利用一个没有宽度b标签来实现水平垂直居中
<style>
.wrap {width:300px; height:300px; text-align:center; background:rgba(0,0,0,0.5);}
.vamb {display:inline-block; width:0px; height:100%; vertical-align:middle;}
.test {background:red; display:inline-block;}
</style>

<div class="wrap">
<b class="vamb"></b>
<div class="test">
CSS吧<br>
来个宽度大点的试试
</div>
</div>

效果图跟上面的一样的,就不截图了,呵呵,下面用美女图片测试吧,比较吸引眼球

三、使用transform实现
一般使用百分比单位的时候都是相对父元素来计算的,但是在css里面有个比较特殊的属性是相对自身宽高来计算的。那就是transform:translate();
这样就简单了,只是这个低版本IE不兼容,而且很遗憾 安卓2.3使用这个有bug,暂时不能在移动端使用
<style>
*{margin:0px; padding:0px;}
.test {position: absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
</style>
<div class="test">

<img src="girl/tpl_8.jpg" width="100" >
</div>

图片水平垂直居中的,任意宽高,相对简单。

四、弹性盒模型
弹性盒模型就是flex,css3新增布局方式,超级好用,谁用谁知道,推荐大家都学习一番。
这个方法我在手机端都很喜欢用,相对爽啊 呵呵。同样比较遗憾的是低版本IE不支持,不过手机端是没有问题的,使用旧版方法display:box;

<style>
*{margin:0px; padding:0px;}
.flex {display:-webkit-box; display:-ms-flex; display:-webkit-flex; display:flex;}
.flex-hc {-webkit-box-pack:center; -ms-justify-content:center; -webkit-justify-content:center; justify-content:center;}
.flex-vc {-webkit-box-align:center; -ms-align-items:center; -webkit-align-items:center; align-items:center;}
.wrap {position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.5); left:0px; top:0px;}
</style>

<div class="wrap flex flex-hc flex-vc">
<div class="test">
<img src="girl/tpl_7.jpg" width="200" >
</div>
</div>

我喜欢flex 水平居中 垂直居中分开用不同的class定义,这样子更灵活一点,你喜欢写在一起也是可以的,相当强大啊。但是低版本的安卓使用的是box旧版弹性盒模型,如果是要多列布局,记得要设置子元素为块元素,不然不会生效,这里说些题外话了。

时间: 2024-10-10 02:36:46

元素不定宽在页面上面,水平垂直居中的相关文章

实现没有宽高的盒子水平垂直居中

实现一个不设置宽高的盒子水平垂直居中的效果的方法 方法一.CSS+定位 让其父元素相对定位,内部元素绝对定位,这里的父元素为body. 原理:让未定义宽高的图片上下左右距离都为0.然后给一个margin自适应.可以想象成一个盒子,给了四个方向的相同的力,这样就会形成一种相对的均衡力量让其停留在中间位置了. <style> img{ position:absolute; top:0; bottom:0; left:0; right:0; margin: auto ; } </style&g

CSS元素(文本、图片)水平垂直居中方法

1.text-align:center; 2.margin:0 auto; 3.display:inline-block; + text-align:center; 4.position:relative; + float:left; 5.line-height 6.上下左右padding 7.position:absolute; + margin:auto; 8.position:absolute; + 负margin 9.position:absolute; + calc() 10.tabl

未知宽高的图片水平垂直居中的几种方法

最近在项目中遇到不固定宽高的图片要水平垂直居中的情况,发现垂直居中存在兼容性问题,下面收集了一些方法,可根据需要权衡使用. 1. 背景法(兼容性好,简单,但不利于动态导入的图片) html: <div class="wrap"></div> css: .wrap{ width:300px; height:200px; background: url(../img/test.jpg) center center no-repeat; } 2. 图片外面用个p标签,

未知宽高的div水平垂直居中

未知宽度的div使内容水平垂直居中方法一:使用display:flex:justify-content:center;align-items: center;属性代码如下:<style> #box{ display: flex; justify-content:center; align-items: center; height: 500px; }</style><div id="box"> 水平垂直居中</div>方法二:使用tran

table-cell实现未知宽高图片,文本水平垂直居中在div

<BODY> <h1>未知宽高的图片水平垂直居中在div</h1> <!--box-outer--> <div class="box-outer"> <div class="box"> <img src="images/01.jpg" /> </div> </div> <!--box-outer--> <h1>多行文

Flexbox制作CSS布局实现水平垂直居中

Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  <meta charset="utf-8"/>  <title>Flexbox制作CSS布局实现水平垂直居中</title>  <style type="text/css">    html {      height: 1

bootstrap弹出的模态框水平垂直居中的实现

学习javascript从入门到放弃!,这是第一篇随笔,经验不足,如有不当之处,还望指出.好了废话不多说直接切入正题吧 1.bootstrap默认的model写法: //触发模态框的button <button data-toggle="modal" data-target="#myModal"type="button" class="btn btn-default" >button </button>

CSS3之flexbox如何实现水平垂直居中和三列等高布局

最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西. 第一个css属性就没有看懂.于是乎,开始各种找资料,各种看书.这些天把对于css3伸缩布局盒(flexbox)模型的理解写成博文,目的是对flexbox做一个简单的介绍. 以下的内容会分为如下小节: 1.关于css3中flexbox需要掌握的概念 2.flexbox实现水平垂直居中对齐 3.三列等高自适应,页脚区域黏附底部的布局 1.关于css3中flexbox需要掌握的知识 因为对于三列等高

css如何将div实现全屏水平垂直居中

css如何将div实现全屏水平垂直居中:本章节介绍一下如何将一个div元素在整个网页内实现水平垂直居中效果,代码是最有说服力的,直接看代码.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title