div块水平居中，垂直居中
水平居中
一个div想要水平居中于它的父div中只需要给它加css属性margin:0 auto; 即可
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
#box{
width: 200px;
height: 200px;
border:2px solid #000;
line-height: 200px;
}
#one{
background: #000;
width:50px;
height: 50px;
margin:0 auto;
} </style>
<body>
<div id="box">
<div id="one"></div>
</div>
</body>
</html>
垂直居中
一个div想要垂直居中于它的父div中，需要给它添加css属性display: inline-block;再给它的父div添加css属性vertical-align: middle;即可
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
#box{
width: 200px;
height: 200px;
border:2px solid #000;
line-height: 200px;
vertical-align: middle;
}
#one{
background: #000;
width:50px;
height: 50px;
display: inline-block;
}
#two{
background: green;
width:50px;
height: 50px;
display: inline-block;
} </style>
<body>
<div id="box">
<div id="one"></div>
<div id="two"></div>
</div>
</body>
</html>
原文网页链接：https://blog.csdn.net/weixin_44535476/article/details/103455164
div块水平居中，垂直居中的更多相关文章
- HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结
最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单. 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两 ...
- DIV块中 元素垂直居中
1 DIV块中 元素垂直居中 作者:知乎用户链接:https://www.zhihu.com/question/20543196/answer/99429177来源:知乎著作权归作者所有.商业转载请联 ...
- CSS水平居中/垂直居中的N个方法
我看最近微博流行CSS居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:"茴香豆的回字有四种写法",万一哪天有个面试官问你:&q ...
- div盒子水平垂直居中方法
文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...
- CSS：使用CSS3将一个div水平和垂直居中显示
使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...
- HTML/CSS：div居中和div内部元素垂直居中（1）
div居中 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果 1. div水平居中:设置marg ...
- div+css:div中图片垂直居中
div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- css 水平居中垂直居中的几种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 让DIV水平和垂直居中的几种方法
我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...
随机推荐
- 转化欧拉回路(难题)-UESTC-1957励志的猴子
励志的猴子 Time Limit: 1000 MS Memory Limit: 256 MB Submit Status 上图是2013南京亚青会吉祥物圆圆.自从它诞生以来,它就被吐槽为最丑吉 ...
- ZOJ 3195 Design the city (LCA 模板题)
Cerror is the mayor of city HangZhou. As you may know, the traffic system of this city is so terribl ...
- 基于iCamera测试光电大赛官方指定摄像头mt9m001调试小结
基于iCamera测试光电大赛官方指定摄像头mt9m001调试小结 先看看官方的接口 组委会指定的模块接口 信号定义说明: VDD:3.3v GND:地 SCK:摄像头寄存器的iic配置信号的时钟线 ...
- postman接口测试工具的常规使用
目录 postman接口测试工具简介与安装 postman发送get请求 JSON数据详解 postman发送post请求 postman中post请求传参说明 postman设置请求的header ...
- 深入学习socket网络编程，以java语言为例
了解java的socket编程与Linux Socket API之间的关系 一.java的网络编程 1.socket原理 socket通信就是通过IP和端口号将两台主机建立连接,提供通信.主机A的应用 ...
- php5.4.16执行shell脚本
因为要用到Python脚本,所以打算直接在PHP中直接调用系统命令system(). 要注意两点: 一.PHP5.3以上不存在安全模式,即要直接执行脚本不需要作任何其他配置. 二.system函数格式 ...
- 常见的web安全问题总结
we安全对于web前端从事人员也是一个特别重要的一个知识点,也是面试的时候,面试官经常问的安全前端问题.掌握一些web安全知识,提供安全防范意识,今天就会从几个方面说起前端web攻击和防御的常用手段 ...
- FCC---CSS Flexbox: Apply the flex-direction Property to Create a Column in the Tweet Embed
The tweet embed header and footer used the flex-direction property earlier with a row value. Similar ...
- Odoo系统有哪些不同版本？
来源:www.odooyun.com 1. Odoo10.0 vs Odoo11.0 vs 8.0 截至2017年底,最新的Odoo发布版为Odoo 11.0,但功能上有一定精简(去除财务模块,去除工 ...
- 2019年Java面试题基础系列228道（2）
21.描述一下 JVM 加载 class 文件的原理机制? JVM 中类的装载是由类加载器(ClassLoader)和它的子类来实现的,Java 中的类加载器是一个重要的 Java 运行时系统组件,它 ...