1. 子元素为行内元素时，父元素使用 text-align: center; 实现子元素的水平居中；

2. 子元素为块级元素时，

　　2.1. 将子元素设置 margin: 0 auto; 实现居中；

　　2.2. 将子元素设置 display: inline-block，然后可使父元素使用text-align:center实现居中；

　　2.3. 根据父元素采用绝对定位，右移父元素宽度的一半，再左移自身宽度的一半；

3. 父元素使用flex布局，

　　3.1. 子元素无论是行内还是块级，采用 align-self: center; 实现水平居中；

　　3.2. 子元素无论是行内还是块级，采用 margin: 0 auto; 实现水平居中；

*****用类似的方法，我们也可以实现元素的垂直居中*****

比如用flex布局，设置 flex-direction: row; 则子元素可以使用 align-self: center; 实现其垂直居中

HTML中css水平居中的几种方式的更多相关文章

  1. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  2. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  3. jQuery中开发插件的两种方式

    jQuery中开发插件的两种方式(附Demo) 做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数 ...

  4. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  5. 基础篇：1.JavaScript运行在html中，引用有几种方式？—— 6.js中常用的输出方式？

    书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的 ...

  6. 【javascript】原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  7. javascript总结40:DOM中操作样式的两种方式

    1 DOM中操作样式的两种方式 1 通过元素的style属性 注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...

  8. 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权

    如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...

  9. HTML与CSS结合的四种方式

    HTML与CSS结合的四种方式: 方式一:每个标签加一个属性: 例如:<div style="background-color:red; color: green"> ...

随机推荐

  1. Java 的八种排序算法

    Java 的八种排序算法 这个世界,需要遗忘的太多. 背景:工作三年,算法一问三不知. 一.八种排序算法 直接插入排序.希尔排序.简单选择排序.堆排序.冒泡排序.快速排序.归并排序和基数排序. 二.算 ...

  2. 阿里Java中级开发测试相关试题及答案

    ------------恢复内容开始------------ 1.JSP文件上传的HTML标签代码定义是? A. <input type="text" name=" ...

  3. Java HashMap源码

    http://blog.csdn.net/qq_27093465/article/details/52207135 http://blog.csdn.net/qq_27093465/article/d ...

  4. Codeforces1312E Array Shrinking 区间DP

    题意 给你一个数组\(a\),只要满足\(a_i=a_{i+1}\)就可以将这两个元素合并成一个值为\(a_i+1\)的元素,问数组最小长度. 解题思路 记得之前某场的F和这题差不多,当时好像是相邻且 ...

  5. ctf古典密码从0到

    本文首发于“合天智汇”公众号 作者:淡灬看夏丶恋雨 古典密码和现代密码的区别: 代换密码 单表代换密码 字符或数学型 凯撒密码 仿射密码 四方密码 培根密码 图表 标准银河字母 圣堂武士密码 猪圈密码 ...

  6. JsonAnalyzer 源码下载

    下载地址:https://files.cnblogs.com/files/heyang78/JsonAnalyzer20200518-01.zip 测试用例:https://www.cnblogs.c ...

  7. spring5源码 -- IOC容器设计理念和核心注解的作用

    一. spring源码整体脉络介绍及源码编译 二. Spring IOC的源码深入学习 2.1 ioc容器的加载过程(重要) 2.2 bean的生命周期源码深度剖析 2.3 循环依赖总结讲解 2.4 ...

  8. 乔悟空-CTF-i春秋-Web-Upload

    2020.09.03 ai 做过的题,两天不看就忘了-- 做题 题目 题目地址 thinking-- 打开网站 告诉了文件在flag.php中,所以写个php,把flag.php文件读取出来就行 盗来 ...

  9. JavaScript 流程控制-循环

    1.循环 循环目的 在实际问题中,有许多具有规律性的重复操作,因此在程序中要完成这类操作就需要重复执行某些语句 JS中的循环 在JS中,主要有三种类型的循环语句: for循环 while循环 do.. ...

  10. 深度神经网络conda环境下载

    介绍 因为使用conda下载数据有时候因为网络问题下载非常慢,因此我把conda的环境备份好,到时可以直接使用conda的conda create -n 新环境名字 –clone 环境的路径 , 直接 ...