<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>css实现的五种居中的方法</title>

	<style>

		.inner {

			height: 300px;

			width: 1200px;

			position: absolute;//

			top: 50%;//

			left: 50%;//

			transform: translate(-50%,-50%);//

			background-color: #888;

			text-align: center;

			line-height: 300px;

		}

		#wrapper {

			display: table;

		}

		#cell {

			display: table-cell;

			vertical-align: middle;

		}

	</style>

</head>

<body>

<!-- 参考网址：https://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods/

1：.inner{

position : absolute;

top: 50%;

left:50%;

transform: translate(-50%, -50%);

}

2：

#wrapper {

    display: table;

}

#cell {

    display: table-cell;

    vertical-align: middle;

}

3：

这个方法使用绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。

因为有固定高度，或许你想给 content 指定 overflow:auto，这样如果 content 太多的话，就会出现滚动条，以免content 溢出。

#content {

    position: absolute;

    top: 50%;

    height: 240px;

    margin-top: -120px; /* negative half of the height */

}

4：

这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。

#content {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    margin: auto;

    height: 240px;

    width: 70%;

}

5：

这个方法只能将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。

#content {

    height: 100px;

    line-height: 100px;

}

6：这种方法，在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。

content 清除浮动，并显示在中间。

#floater {

    float: left;

    height: 50%;

    margin-bottom: -120px;

}

#content {

    clear: both;

    height: 240px;

    position: relative;

}

 -->

	<!-- <div class="inner">方法一</div> -->

	<div id="wrapper"></div>

	<div id="cell"></div>

</body>

</html>

　　

css实现居中的五中方法的更多相关文章

  1. css实现居中的各种方法

    css垂直居中有很多种方法,可以参考下这个网站

  2. CSS 布局实例系列（一）总结CSS居中的多种方法

    使用 CSS 让页面元素居中可能是我们页面开发中最常见的拦路虎啦,接下来总结一下常见的几种居中方法吧. 1. 首先来聊聊水平居中: text-align 与 inline-block 的配合 就像这样 ...

  3. 使用Flexbox实现CSS竖向居中

    竖向居中需要一个父元素和一个子元素合作完成. <div class="flexbox-container"> <div>Blah blah</div& ...

  4. HTML+CSS·经常使用的设计方法

    HTML+CSS·经常使用的设计方法: ======================================================= margin[外] = = padding[内] ...

  5. DIV居中的经典方法

    1. 实现DIV水平居中 设置DIV的宽高,使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. 1 div{ 2 width: 100px; 3 height: 100px ...

  6. css实现垂直水平居中的方法（个数不限）？

    方法一:使用绝对定位 大家都知道margin:0 auto;能够实现水平居中,但却不知道margin:0 auto;也是可以实现垂直居中的: 给居中元素添加如下样式: .Absolute-Center ...

  7. easyui 中iframe嵌套页面，大弹窗自适应居中的解决方法。$('#win').window()

    easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法.$('#win').window() 以下是左边栏和头部外层遮罩显示和隐藏方法 /*外层 遮罩显示*/ function wrapMa ...

  8. css图片居中(水平居中和垂直居中)

    css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 ...

  9. 如何使用CSS实现居中

    前言: 这一篇主要是翻译 <how-to-center-anything-with-css>这一篇文章的主要内容,再加上自己的一些概括理解:主要问题是解决垂直居中的问题.我们知道实现水平居 ...

随机推荐

  1. Java7中的ForkJoin并发框架初探（中）——JDK中实现简要分析

    原文发表于 2013 年 8 月 28 日 由 三石 根据前文描述的Doug Lea的理论基础,在JDK1.7中已经给出了Fork Join的实现.在Java SE 7的API中,多了ForkJoin ...

  2. j2ee分布式架构 dubbo + springmvc + mybatis + ehcache + redis 分布式架构

    介绍 <modules>        <!-- jeesz 工具jar -->        <module>jeesz-utils</module> ...

  3. java多线程面试总结

    一:基本知识点 1.1线程与进程区别: 1．进程是资源分配的最小单位,线程是CPU调度的最小单位 2．一个进程由一个或多个线程组成 3．进程之间相互独立,每个进程都有独立的代码和数据空间,但同一进程下 ...

  4. Mysql 忘记root密码后修改root密码

    1.修改my.cnf: 在mysqld进程配置文件中添加skip-grant-tables,添加完成后记住保存. 2.重新启动MYSQL数据库: service mysqld restart 2.修改 ...

  5. CodeBlocks

  6. SMD晶振发展和智能手机的普及总是惊人的相似!

    其实触屏手机在2002年前后就已经出现了,但那个时候的触屏手机不算是现在的这种智能手机,有人说最早发行触屏手机的是诺基亚,也有人说是苹果还有人认为摩托罗拉.总之众说纷纭,小编那里还太小也并不是很了解, ...

  7. （入门篇 NettyNIO开发指南）第三章-Netty入门应用

    作为Netty的第一个应用程序,我们依然以第2章的时间服务器为例进行开发,通过Netty版本的时间服务报的开发,让初学者尽快学到如何搭建Netty开发环境和!运行Netty应用程序. 如果你已经熟悉N ...

  8. SparkMLlib回归算法之决策树

    SparkMLlib回归算法之决策树 (一),决策树概念 1,决策树算法(ID3,C4.5 ,CART)之间的比较: 1,ID3算法在选择根节点和各内部节点中的分支属性时,采用信息增益作为评价标准.信 ...

  9. SmartCoder每日站立会议02

    1.站立会议内容 经过昨天一天的学习,大家了解到了很多新的知识,在各自任务实现方面也遇到了问题,比如首页的css样式实现.API接口的连接和地图接入的样式,经过今日站立会议,大家在一起讨论了各自出现的 ...

  10. JVM的内存区域划分以及垃圾回收机制详解

    在我们写Java代码时,大部分情况下是不用关心你New的对象是否被释放掉,或者什么时候被释放掉.因为JVM中有垃圾自动回收机制.在之前的博客中我们聊过Objective-C中的MRC(手动引用计数)以 ...