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. WebRTC的VAD 过程解读

    摘要: 在上一篇的文档中,分析unimrcp中vad算法的诸多弊端,但是有没有一种更好的算法来取代呢.目前有两种方式 1. GMM   2. DNN. 其中鼎鼎大名的WebRTC VAD就是采用了GM ...

  2. Pyinstaller打包： 将资源文件或文件夹打包到最后生成的exe中

    前提:用pyinstaller打包时部分资源文件可以利用qrc转成py文件来读取,但是有部分文件类型不适用. 原理:Pyinstaller 将资源文件一起打包到exe中.当exe运行时,会生成一个临时 ...

  3. C# OWC11

    public void OcwChart(int[] Data,string[] DataName,string Yname,string Xname,string ChartName,string ...

  4. Mac 的命令行配置字体颜色

    1.在mac命令行终端输入: ls -al  查看所有隐藏文件,找到.bash_profile vi .bash_profile  编辑文件,贴入以下内容并保存 source .bash_profil ...

  5. python小白入门基础（三：整型）

    # Number(int float str complex) #int 整型(正整数 0 负整数)intvar_1 = 100print(intvar_1)invar_2 = 0 print(inv ...

  6. Docker启动失败

    报错信息: Job for docker.service failed because the control process exited with error code. See "sy ...

  7. [Oracle/Sql] Decode与Case

    Decode和case都可以实现SQL中的条件结构,下面为用法示例: select id,name,score,decode(floor(score/20),5,'A',4,'B',3,'C',2,' ...

  8. linux下查找文件中的某个关键字

    1.方法一:grep '关键字' filename 2.方法二:vim filename进入文件里面,不要进入insert编辑模式,直接在normal模式下输入/关键字进行搜索 按n进行查找下一个

  9. 抓取 USB 总线LOG

    在实际工作中经常会遇到需要分析USB报文的情形.比如对比不同厂家4G/5G模块.解决实际IP over USB传输效率低下问题. 这时候如果能抓取到 USBMOM 总线的报文将会大有裨益.毕竟所有ho ...

  10. [程序员代码面试指南]字符串问题-字符串匹配问题(DP)

    问题描述 字符串str,模式串exp. 必须保证str中无'.'和'星号'字符,并且exp中'星号'不出现在首位,且无连续两个'星号'.PS星号是字符只是暂时没找到markdown的星号转义字符. ' ...