<!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. redis-key相关命令

    本篇主要介绍和redis的key进行操作的相关命令. 命令 描述 复杂度 返回值 DEL key [key ...] 删除给定的一个或多个 key .不存在的 key 会被忽略.删除单个列表.集合.有 ...

  2. 【less和sass的区别，你了解多少？】

    在介绍less和sass的区别之前,我们先来了解一下他们的定义: 一.Less.Sass/Scss是什么? 1.Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量.继承.运算.函数 ...

  3. ke

    #include <stdio.h> #include <stdlib.h> // For rand() and srand() #include <time.h> ...

  4. Spring Security教程系列（一）基础篇-2

    第 4 章 自定义登陆页面 Spring Security虽然默认提供了一个登陆页面,但是这个页面实在太简陋了,只有在快速演示时才有可能它做系统的登陆页面,实际开发时无论是从美观还是实用性角度考虑,我 ...

  5. 002---第一个Hibernate示例

    Hibernate压缩文件结构 下载Hibernate压缩文档,下面为文件结构: Hibernate3.jar:为Hibernate的核心jar包: build.xml:重新打包配置文件 build. ...

  6. 利刃 MVVMLight 10：Messenger 深入

    1.Messager交互结构和消息类型 衔接上篇,Messeger是信使的意思,顾名思义,他的目是用于View和ViewModel 以及 ViewModel和ViewModel 之间的消息通知和接收. ...

  7. Android6.0-运行时权限处理

    为什么需要有运行时权限? 大家都知道在Android6.0之前,权限在应用安装过程中只询问一次,以列表的形式展现给用户,如果点击取消(即不认可应用所申请的权限),则会取消应用的安装.而用户出于安装应用 ...

  8. 点评阿里JAVA手册之MySQL数据库 （建表规约、索引规约、SQL语句、ORM映射）

    下载原版阿里JAVA开发手册  [阿里巴巴Java开发手册v1.2.0] 本文主要是对照阿里开发手册,注释自己在工作中运用情况. 本文内容:MySQL数据库 (建表规约.索引规约.SQL语句.ORM映 ...

  9. 当react框架遇上百度地图

      百度地图官方文档的使用指导是这样说的:在页面中引入<script type="text/javascript" src="http://api.map.baid ...

  10. 化繁为简(三)—探索Mapreduce简要原理与实践

    目录-探索mapreduce 1.Mapreduce的模型简介与特性?Yarn的作用? 2.mapreduce的工作原理是怎样的? 3.配置Yarn与Mapreduce.演示Mapreduce例子程序 ...