水平居中
一个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块水平居中，垂直居中的更多相关文章

  1. HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结

    最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单. 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两 ...

  2. DIV块中 元素垂直居中

    1 DIV块中 元素垂直居中 作者:知乎用户链接:https://www.zhihu.com/question/20543196/answer/99429177来源:知乎著作权归作者所有.商业转载请联 ...

  3. CSS水平居中/垂直居中的N个方法

    我看最近微博流行CSS居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:"茴香豆的回字有四种写法",万一哪天有个面试官问你:&q ...

  4. div盒子水平垂直居中方法

    文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...

  5. CSS：使用CSS3将一个div水平和垂直居中显示

    使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...

  6. HTML/CSS：div居中和div内部元素垂直居中（1）

    div居中 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果 1. div水平居中:设置marg ...

  7. div+css:div中图片垂直居中

    div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  8. css 水平居中垂直居中的几种方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 让DIV水平和垂直居中的几种方法

    我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...

随机推荐

  1. [权限管理系统(四)]-spring boot +spring security短信认证+redis整合

    [权限管理系统]spring boot +spring security短信认证+redis整合   现在主流的登录方式主要有 3 种:账号密码登录.短信验证码登录和第三方授权登录,前面一节Sprin ...

  2. Java修饰符public，protected，default，private访问权限

    public 具有最大的访问权限.所有类可访问. protected 主要是用来保护子类.自身.子类及同一个包中类可以访问 default 没有加修饰符的.有时候也称为friendly,它是针对本包访 ...

  3. 什么是cookie？什么是session？session和cookie有什么区别？

    在技术面试中,经常被问到“说说Cookie和Session的区别”,大家都知道,Session是存储在服务器端的,Cookie是存储在客户端的,然而如果让你更详细地说明,你能说出几点?今天个推君就和大 ...

  4. 将数据库中数据导出为excel表格

    public class Excel { private static Logger logger = LoggerFactory.getLogger(Excel.class); /** * 导出项目 ...

  5. GHOST CMS - Ghost Handlebars主题 Ghost Handlebars Themes

    Ghost Handlebars主题 Ghost Handlebars Themes Ghost主题层被设计为让开发人员和设计人员能够灵活地构建由Ghost平台支持的自定义发布 The Ghost t ...

  6. SpringBoot IoC启动流程、初始化过程及Bean生命周期各个阶段的作用

    目录 SpringBoot IoC启动流程.初始化过程及Bean生命周期各个阶段的作用 简述 首先明确IoC容器是啥 准备-SpringApplication的实例化 启动-SpringApplica ...

  7. 庖丁解牛 Activity 启动流程

    前言 这是 Android 9.0 AOSP 系列 的第五篇了,先来回顾一下前面几篇的大致内容. Java 世界的盘古和女娲 -- Zygote 主要介绍了 Android 世界的第一个 Java 进 ...

  8. asp.net core 系列 9 三种运行环境和IIS发布

    一.在asp.net core中使用多个环境 ASP.NET Core 配置是基于运行时环境, 使用环境变量.ASP.NET Core 在应用启动时读取环境变量ASPNETCORE_ENVIRONME ...

  9. 一个故事搞懂Java并发编程

    最近在给别人讲解Java并发编程面试考点时,为了解释锁对象这个概念,想了一个形象的故事.后来慢慢发现这个故事似乎能讲解Java并发编程中好多核心概念,于是完善起来形成了了这篇文章.大家先忘记并发编程, ...

  10. Python连载57- 邮件头和主题、解析邮件

    一.添加邮件头,抄送等信息 1.mail["From"]表示发送者信息,包括姓名和邮件 2.mail["To"]表示接收者信息,包括姓名和邮件地址 3.mail ...