Css实现垂直水平居中的六种方法
经常在项目中用到,今天总结了一下:
以下两个类为公共类,便于更好的显示效果,非核心代码
.common{
width: 600px;height: 180px;
background-color:#56abe4;
color: #fff;
margin: 15px auto;
border-radius: 3px;
} .con{
display: inline-block;
padding: 15px;
width: 160px;
height: 80px;
background-color: orange;
}
正文部分:
第一种方法:
/*position: absolute;top:0;right: 0;bottom: 0;left: 0;margin: auto;*/
HTML结构:
<div class="common block1">
<div class="inner1 con">
position: absolute;
top:0;right: 0;bottom: 0;left: 0;
margin: auto;
</div>
</div>
CSS部分:
.block1{
position: relative;
} .inner1{
position: absolute;
top:0;right: 0;bottom: 0;left: 0;
margin: auto;
}
第二种方法:
/*display: table-cell*/
HTML结构:
<div class="common block2">
<div class="con">
display: table-cell;
text-align: center;
vertical-align: middle;
</div> </div>
CSS部分:
.block2{
display: table-cell;
text-align: center;
vertical-align: middle;
}
第三种方法:
/*display: flex;*/
HTML结构:
<div class="common block3">
<div class="con">
display: flex;
align-items: center;
justify-content: center;
</div>
</div>
CSS部分:
.block3{
display: flex;
align-items: center;
justify-content: center;
}
第四种方法:
/*负定位*/
HTML结构:
<div class="common block4">
<div class="inner4 con">
position: absolute;
top: 50%;
left: 50%;
并利用负定位消除元素的上下,左右偏移
</div>
</div>
CSS部分:
.block4{
position: relative;
} .inner4{
position: absolute;
top: 50%;
left: 50%;
margin-top: -55px;/*80/2+15=55*/
margin-left: -95px;/*160/2+15=95*/
}
第五种方法:
/*transform*/
HTML结构:
<div class="common block5">
<div class="inner5 con">
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
</div>
</div>
CSS部分:
.block5{
position: relative;
} .inner5{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
word-wrap: break-word;
}
第六种方法:(兼容性较好)
/*行内块*/
HTML结构:
<div class="common block6">
<div class="inner6 con">行内块:<br/>谨记span标签与该div之间是没有空白的,否则会产生误差</div><span></span>
</div>
CSS部分:
.block6{ text-align:center;} .inner6,.block6 span{
display:inline-block;
*display:inline;
zoom:1;
vertical-align:middle;
} .inner6{max-width:100%;max-height:100%;} .block6 span{width:0;height:100%;}
以上几种方案存在兼容性问题,在使用时请先查询核心css的浏览器兼容情况,查询地址:http://caniuse.com/
以上。
欢迎补充~
Css实现垂直水平居中的六种方法的更多相关文章
- css实现垂直水平居中的5种方法
css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...
- css实现垂直水平居中的方法(个数不限)?
方法一:使用绝对定位 大家都知道margin:0 auto;能够实现水平居中,但却不知道margin:0 auto;也是可以实现垂直居中的: 给居中元素添加如下样式: .Absolute-Center ...
- CSS导航菜单水平居中的多种方法
CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...
- css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法?)
实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...
- CSS之垂直水平居中的背后
最开始,我想说,这个体系有点大,我写的并不好.就当作是一个思路吧,虽然这个思路有点乱.几乎每一个实现方案的背后都是该属性及其组合的原理,每一个都要剖析其规范细节的话,这篇文章绝不会是这样的篇幅,所以每 ...
- css文本垂直水平居中
一.单行文本居中 .content{ height:100px; line-height:100px; text-align:center; border:1px solid red; } 效果图 二 ...
- css实现容器垂直水平居中的七中方法
方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: center;jus ...
- css实现垂直水平居中的方法
html结构: <div class="box"> <div>垂直居中</div> </div> 方法1:display:flex ...
- CSS之垂直水平居中方法
//居中方法1 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 346px; height ...
随机推荐
- C++ 推断进程是否存在
[cpp] view plaincopyprint? #include <windows.h> #include "psapi.h" #include"std ...
- c++11 : static_assert和 type traits
static_assert提供一个编译时的断言检查.如果断言为真,什么也不会发生.如果断言为假,编译器会打印一个特殊的错误信息. 1 2 3 4 5 6 7 8 9 10 11 12 13 templ ...
- lua 加密
项目要求对lua脚本进行加密,查了一下相关的资料 ,得知lua本身可以使用luac将脚本编译为字节码(bytecode)从而实现加密,试了一下,确实可行.下面是使用原生的lua解释器编译字节码:1.新 ...
- MySQL加密的性能测试
这是对MySQL进行加密性能测试的两篇文章系列之二.在第一篇中,我专门使用MySQL的内置的对SSL的支持来 做压力测试,产生了一些令人惊讶的结果. AD:WOT2015 互联网运维与开发者大会 热销 ...
- android ViewFlipper的使用
有个android.widget.ViewAnimator类继承至FrameLayout,ViewAnimator类的作用是为FrameLayout里面的View切换提供动画效果.该类有如下几个和动画 ...
- canvas-画七巧板
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...
- Request.ServerVariables 服务器环境变量
Request.ServerVariables["Url"] 返回服务器地址 Request.ServerVariables["Path_Info"] 客户端提 ...
- javascript "非法值"检验.
<script type="text/javascript"> function getCoord() { var x = document.getElementByI ...
- SQL Server中的临时表和表变量 Declare @Tablename Table
在SQL Server的性能调优中,有一个不可比面的问题:那就是如何在一段需要长时间的代码或被频繁调用的代码中处理临时数据集?表变量和临时表是两种选择.记得在给一家国内首屈一指的海运公司作SQL Se ...
- 设置Chrome和IE搜索栏的默认搜索引擎
由于本人比较喜欢用Google香港作为自己的默认搜索引擎,Chrome里面可以轻松设置. ======================== Chrome ======================= ...