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 ...
随机推荐
- laravel敏捷应用
App Category Recipes dealing with Laravel's App facade Checking Your Environment Checking if You're ...
- wpf-DataTemplate应用
在WPF中,决定数据外观的是DataTemplate,即DataTemplate是数据内容的表现形式,一条数据显示成什么样子,是简单的文本还是直观的图形,就是由DataTemplate决定的.下面通过 ...
- DateBox( 日期输入框) 组件
本节课重点了解 EasyUI 中 DateBox(日期输入框)组件的使用方法,这个组件依赖于 Combo(自定义下拉框)和 Calendar(日历). 一. 加载方式//class 加载方式<i ...
- Function.prototype.bind
解析Function.prototype.bind 简介 对于一个给定的函数,创造一个绑定对象的新函数,这个函数和之前的函数功能一样,this值是它的第一个参数,其它参数,作为新的函数的给定参数. b ...
- C# XML流操作简单实例
这里我们先介绍操作XML文件的两个对象:XmlTextReader和XmlTextWriter打开和读取Xml文件使用到的对象就是XmlTextReader对象.下面的例子打开了与程序在同一路径下的一 ...
- Lesson 1: What is design? Why is it important?
Week 2: What is design? Why is it important? Article 1: Startups, this is how design works. It's a s ...
- Spring4分别整合mongo2.X和3.0
1.pom文件添加: <dependency> <groupId>org.mongodb</groupId> <artifactId>mongo-jav ...
- Python新手学习基础之循环语句——While循环
while循环 上一节的条件语句实际上只能执行一次,如果要反复的判断执行一些事件要怎么办? 这个时候就需要靠while.for等循环语句了. 我们先来认识下while循环,何为while循环?就是在某 ...
- uC/OS-II中的中断(转)
中断是指在程序运行过程中,应内部或外部异步事件的请求中止当前任务,而去处理异步事件所要求的任务的过程. 中断服务函数(ISR)是应中断请求而运行的程序. 中断向量就是中断服务函数(ISR)的入口地址, ...
- 如何在Ubuntu安装*.exe文件
下载及安装 若你使用 Debian 或者 Ubuntu 之类的发行版,只需要一个命令即可完成安装: apt-get install wine 若你使用的为其他发行版,请访问 http://winehq ...