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 ...
随机推荐
- Python3 函数基础2
目录 可变长参数 可变长形参: *args 可变长实参: *容器类 可变长形参: **kwargs 可变长实参: **字典 函数对象 引用 当做容器类型元素 当做参数传给一个函数 当做函数的返回值 函 ...
- Robotframework常见问题收集
一.Robotframework1.7.3控制台乱码处理 1.找到文件C:\Python37\Lib\site-packages\robotide\contrib\testrunner\testrun ...
- tomcat安装与环境变量配置
1.安装tomcat 2.找到tomcat安装路径的bin文件夹 → 打开 startup.bat 3.打开浏览器输入网址 http://localhost:8080 4.配置CATALINA_BAS ...
- Linux内核构建过程
构建内核 # shell 执行如下指令make zImage 全局变量 srctree := $(if $(KBUILD_SRC),$(KBUILD_SRC),$(CURDIR))objtree ...
- 在 ASP.NET Core 中使用 AutoMapper 使 Entity 和 Resource 之间进行映射
目录 从 NuGet 安装 AutoMapper 添加 Entity类 和 Resource类 添加一个 Profile文件,配置映射关系 在Startup中对AutoMapper进行注册 在项目中使 ...
- webpack学习2.3webpack核心概念
核心概念(四个) Entry(入口) Output(出口) Loaders()来处理其他类型的资源文件 Plugins(插件) 1.入口(Entry) 作用:代码的入口,打包的入口,单个或多个, 示例 ...
- 剑指Offer-46.孩子们的游戏(圆圈中最后剩下的数)(C++/Java)
题目: 每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此.HF作为牛客的资深元老,自然也准备了一些小游戏.其中,有个游戏是这样的:首先,让小朋友们围成一个大圈.然后,他随机指定 ...
- VUEday01
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 深入理解this原理(JavaScript)
文章目录 JavaScript中this的原理 一.问题的由来 二.内存的数据结构 三.函数 四.环境变量 JavaScript中this的原理 一.问题的由来 学懂 JavaScript 语言,一个 ...
- GHOST CMS - Ghost Handlebars主题 Ghost Handlebars Themes
Ghost Handlebars主题 Ghost Handlebars Themes Ghost主题层被设计为让开发人员和设计人员能够灵活地构建由Ghost平台支持的自定义发布 The Ghost t ...