Css实现垂直水平居中的六种方法

经常在项目中用到,今天总结了一下:

演示地址:http://codepen.io/anon/pen/xGdpOa

以下两个类为公共类,便于更好的显示效果,非核心代码

	.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/

以上。

欢迎补充~

时间: 2024-10-04 22:06:20

Css实现垂直水平居中的六种方法的相关文章

css实现垂直水平居中的5种方法

css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; border:1px solid #000; display: table-cell; text-align: center; vertical-align: middle; } #small{ display: inline-block; width: 50px; height: 50px; backgro

CSS导航菜单水平居中的多种方法

在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知宽度的元素居中,下面我们会列出几种方法来解决水平居中问题.当然这些方法不一定是用来解决导航菜单问题,还有其它类似情况也是可以使用的. 在线演示:Demo CSS导航菜单水平居中的多种方法: 方法1:display:inline-block 方法2:position:relative 方法3:display:table 方法4:dis

实现元素的垂直与水平居中的六种方法

一. img的垂直水平居中 使用到的重要样式属性display,vertical-align vertical-align:middle这个属性是对table元素垂直居中起作用,如果想使用在img元素上,就注意下面的display设置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</titl

css div垂直水平居中实现

比如设置html中下面的div为垂直水平居中,则 <div id="box"></div> css样式 #box{ width: 300px; height: 200px; margin-left: -150px;//宽度的一半,很重要,不然不居中,会偏右 margin-top: -100px;//高度的一半 position: absolute;//绝对定位方式 top: 50%; left: 50%; background-color: aqua;//背景颜

css实现垂直水平居中的方法(个数不限)?

方法一:使用绝对定位 大家都知道margin:0 auto;能够实现水平居中,但却不知道margin:0 auto;也是可以实现垂直居中的: 给居中元素添加如下样式: .Absolute-Center { border:2px solid red; height: 200px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 缺点:内容容易溢出,建议使用overflow:auto; 方法二:负ma

CSS实现垂直水平居中的三个方法:(1)固定宽高 (2)不固定宽高 (3)Flex

这两天迷上逛一些前端技术网站和论坛了,据说学前端要学会记录才能加深印象,所以有事没事还是写些随笔吧. 以前还在一个公司的面试试卷里做到过: 垂直居中: 1.父元素设置position:relative, 子元素设置position:absolute; top:50%; margin-top: -元素高度 2.height: 500px; line-height: 500px; 水平居中: 1.text-align:center 2.margin: 0 auto; 以上是我之前写的答案,接下来看看

css实现垂直水平居中的几种方法

直接上代码,只需切换class就可看效果 <!DOCTYPE html> <html> <head> <title>水平垂直居中</title> <style type="text/css"> *{ margin: 0; padding: 0; } .myDiv{ width:200px; height: 200px; background: lightblue; } /*方法一*/ .divToCenter1{

css实现垂直水平居中的6种方案

1.绝对定位+margin:auto <code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; wor

CSS实现垂直水平居中

HTML结构: <div class="wrapper"> <div class="content"></div> </div> CSS代码: .wrapper{ position:relative; height:400px; width:100%; background-color: antiquewhite; } .content{ background-color:#6699FF; width:200px; h