让块元素在div中水平居中,并且垂直居中的五种方法
在写代码前,先做下准备工作,写两个div,设置下div的大小,把小的div放在大的div里面。可以给小的div设置下颜色,方便观看.
方法一:写一个伪元素,将它设置为行内块元素,高度与父元素相同,写一条属性,vertical-align:middle,子元素也要写,具体代码如下:
<style>
div{width:500px;height:500px;box-shadow:0 0 5px #000; text-align:center;}
.zi{width:100px;height:100px;background:#60C;display:inline-block;vertical-align:middle;}
div:after{content:""; height:500px; background:#00C;display:inline-block;vertical-align:middle;}
</style>
</head>
<body>
<div >
<div class="zi"></div>
</div>
方法二:利用定位,给大的div写一个position:relative;子元素写position:absolute; 这时子元素的包含块就是外面大的div,然后给里面的div写一下位置left:0;right:0;top:0;bottom:0;margin:auto;主要看一下CSS中的样式,具体代码如下:
.zi{width:100px;height:100px;background:#60C; position:absolute; left:0;right:0;top:0;bottom:0;margin:auto;}
方法三:与方法二类似,也是用到定位,但是区别在于调整里面div位置时,不写right:0;bottom:0;而是使用margin可以设置负数,调整里面div的位置,具体代码如下:
div{width:500px;height:500px;box-shadow:0 0 5px #000; position:relative;}
.zi{width:100px;height:100px;background:#60C;position:absolute;left:50%;top:50%; margin:-50px 0 0 -50px;
方法四:这种方法是在前一种方法上的延申,只是不是用margin,而是使用transform:translate()可以在不知道宽高的情况下进行居中,tranlate()函数是相对于自身的。
具体代码如下:
div{width:500px;height:500px;box-shadow:0 0 5px #000;position:relative;}
.zi{width:100px;height:100px;background:#60C;position:absolute;left:50%;top:50%;transform:translate(-50px,-50px);}
方法五:使用弹性盒,给父元素设置这三条属性display:flex; 水平方向居中 justify-content:center;垂直方向居中align-items:center;具体代码如下:
div{width:500px;height:500px;box-shadow:0 0 5px #000; display:flex; justify-content:center;align-items:center;}
.zi{width:100px;height:100px;background:#60C;}
让块元素在div中水平居中,并且垂直居中的五种方法的更多相关文章
- div中的内容垂直居中的五种方法
一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...
- CSS总结div中的内容垂直居中的五种方法
一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...
- 在shell中变量的赋值有五种方法!
转至:https://blog.csdn.net/weibo1230123/article/details/82085226 在shell中变量的赋值有五种 :使用 read 命令,直接赋值,使用命令 ...
- 设置 img 在 div 中水平居中和垂直居中
Ø 前言 写 html + css 时,img 标签的垂直与水平居中,应该是很常见的设计.实现的方式很多,但是容易遗忘,下面分别整理了几种实现方式. 1. css 代码 <style ty ...
- JAVA中创建线程池的五种方法及比较
之前写过JAVA中创建线程的三种方法及比较.这次来说说线程池. JAVA中创建线程池主要有两类方法,一类是通过Executors工厂类提供的方法,该类提供了4种不同的线程池可供使用.另一类是通过Thr ...
- 一个未知宽高的元素在div中垂直水平居中
<body> <div id="#div1"> <img src="img1.png"></img> </ ...
- [转]如何让div中的内容垂直居中
转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...
- 如何让div中的内容垂直居中
虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果, ...
- 文字在div中水平和垂直居中的的css样式
文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...
随机推荐
- python深拷贝与浅拷贝的区别
可变对象:一个对象在不改变其所指向的地址的前提下,可以修改其所指向的地址中的值 不可变对象:一个对象所指向的地址上值是不能修改的,如果你修改了这个对象的值,那么它指向的地址就改变了,相当于你把这个对象 ...
- python学习-并发编程(十四)
14.2线程的创建与启动 import threading # 定义一个普通的action函数,该函数准备作为线程执行体 def action(max): for i in range(max): p ...
- 百万年薪python之路 -- 前端CSS样式
CSS样式 控制高度和宽度 width宽度 height高度 块级标签能设置高度和宽度,而内联标签不能设置高度和宽度,内联标签的高度宽度由标签内部的内容来决定. 示例: <!DOCTYPE ht ...
- Tomcat原理与优化随笔
1. 基础组件: Server, Service: Connector(http, https, ajp用于Apache反向代理), Engine Engine: Realm用于安全配置等,如User ...
- Openmp多线程编程练习
环境配置 一般使用Visual Studio2019来作为openmp的编程环境 调试-->属性-->C/C++-->所有选项-->Openmp支持改为 是(可以使用下拉菜单) ...
- python pytesseract使用
正确使用方法 1.tesseract-orc安装 tesseract-ocr-setup-3.05.00dev.exe下载 2.pytesseract pip install pytesseract ...
- Data Compression Category
Data Compression is an approach to compress the origin dataset and save spaces. According to the Eco ...
- vue学习之插槽
插槽 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. 个人理解:我感觉插槽就是父组件控制插槽 ...
- Python的看门狗实现自动化实时对服务器、Windows或Linux文件夹的实时监控
众所周知,在运维过程中,实时获取目标文件夹至关重要,Python的watchdog是用程序来监视文件系统事件Python库,所以用该库可以实现对文件夹的实时监控,filenotify.py代码如下: ...
- Linux 常用命令 | free 详解
free命令可以显示Linux系统中空闲的.已用的物理内存及swap内存,及被内核使用的buffer.在Linux系统监控的工具中,free命令是最经常使用的命令之一.本文介绍free命令的使用方法和 ...