css实现居中的五中方法
<!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实现居中的五中方法的更多相关文章
- css实现居中的各种方法
css垂直居中有很多种方法,可以参考下这个网站
- CSS 布局实例系列（一）总结CSS居中的多种方法
使用 CSS 让页面元素居中可能是我们页面开发中最常见的拦路虎啦,接下来总结一下常见的几种居中方法吧. 1. 首先来聊聊水平居中: text-align 与 inline-block 的配合 就像这样 ...
- 使用Flexbox实现CSS竖向居中
竖向居中需要一个父元素和一个子元素合作完成. <div class="flexbox-container"> <div>Blah blah</div& ...
- HTML+CSS·经常使用的设计方法
HTML+CSS·经常使用的设计方法: ======================================================= margin[外] = = padding[内] ...
- DIV居中的经典方法
1. 实现DIV水平居中 设置DIV的宽高,使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. 1 div{ 2 width: 100px; 3 height: 100px ...
- css实现垂直水平居中的方法（个数不限）？
方法一:使用绝对定位 大家都知道margin:0 auto;能够实现水平居中,但却不知道margin:0 auto;也是可以实现垂直居中的: 给居中元素添加如下样式: .Absolute-Center ...
- easyui 中iframe嵌套页面，大弹窗自适应居中的解决方法。$('#win').window()
easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法.$('#win').window() 以下是左边栏和头部外层遮罩显示和隐藏方法 /*外层 遮罩显示*/ function wrapMa ...
- css图片居中(水平居中和垂直居中)
css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 ...
- 如何使用CSS实现居中
前言: 这一篇主要是翻译 <how-to-center-anything-with-css>这一篇文章的主要内容,再加上自己的一些概括理解:主要问题是解决垂直居中的问题.我们知道实现水平居 ...
随机推荐
- 浅谈mmap()和ioremap()的用法与区别
一.mmap()mmap()函数是用来将设备内存线性地址映射到用户地址空间.(1)首先映射基地址,再通过偏移地址寻址:(2)unsigned char *map_cru_base=(unsigned ...
- JDK的并发容器
除了提供诸如同步控制,线程池等基本工具外,为了提高开发人员的效率,JDK已经为我们准备了一大批好用的并发容器,这些容器都是线程安全的,可以大大减少开发工作量.你可以在里面找到链表.Hash ...
- linux统计多个文件大小总和
首先:查看当前文件夹大小的命令是: [root@host1 test]# du -sh 39M . 查看当前文件夹下所有文件的大小: [root@host1 test]# du -sh * 108K ...
- grok 匹配log4j
input { file { codec => multiline { pattern => "^\[2016" negate => true what => ...
- mongodb 创建LBS位置索引
<dependency> <groupId>org.mongodb</groupId> <artifactId>mongo-java-driver< ...
- css隐藏文字的小技巧
前段时间,在做项目的时候,遇到一个问题.背景图片上有一个“立即注册”的按钮,需要点击.但是问题是:现在的图片是背景图片,如果图片是在html页面内的话,我们可以使用锚点来对图片添加链接.这个时候,我们 ...
- 初入计算机图形学（二）：对bidirectional path tracing的一些困惑
本人水平有限,若有错误也请指正~ 前文提及了光线追踪的一些常用手法,但是其中path tracing的实现最为简单,但是其最致命的一个缺点就是图像收敛速度很慢..原因在于从摄影机发射出的每一条光线若不 ...
- File字节流
1. File f = new File("文件路径") 注意:相对路径:非web项目的相对都是以项目为起点.(src/a/txt(建议) 绝对路径:f: ...
- 最全面的Java字节byte操作,处理Java基本数据的转换及进制转换操作工具,流媒体及java底层开发项目常用工具类
前言:用于处理Java基本数据的转换及进制转换操作工具 一.实现功能 1.int与byte互转 2.int与byte[]互转 3.short与byte互转 4.short与byte[]互转 5.16位 ...
- 纯css实现横向下拉菜单
自己最近在捣腾css代码,不光是js能做很多有趣的东西,这货也可以做很多东西,现在把自己的一些作品分享给大家. 做得有点粗糙,大家根据这个思路来,可以自己修改修改. 关于demo:这是一个横向下拉的菜 ...