居中：是子元素相对于在父元素里面居中。父子宽度都固定。

A：水平居中：

①给子元素设置一个宽度后。在给其水平方向的margin设置auto，子元素会在父元素水平方向的剩余空间，左右两边平均分配，也就左右对齐了。

B进行定位居中：

给子元素进行position：absolute，让其子元素的宽高为父元素的一半（eg：子元素left:50%,top:50%）；同时给其父元素位置设置为relative。 同时再减去子元素的宽高的一半 （百分比，子元素的宽高为父元素的50%）

C：用display方式居中

D：text-align居中：

父元素设置text-align;center；子元素设置为inline-block。

注:子元素不要设置为行盒inline，因为行盒的非可替换元素（文本类）宽高需要内容撑起来，设置宽高不占尺寸

css 居中 父子元素的更多相关文章

  1. 在css中使用hover来控制其他元素的样式，该两个元素必须是父子元素

    .col-3:hover .check-box { display: block; } 在css中使用hover来控制其他元素的样式,该两个元素必须是父子元素!!!!

  2. css3-7 如何让页面元素水平垂直都居中（元素定位要用css定位属性）

    css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性) 一.总结 一句话总结:元素定位要用css定位属性,而且一般脱离文档流更加好操作.先设置为绝对定位,上左都50%,然后margi ...

  3. css使子元素在父元素居中的各种方法

    html结构: <div class="parent"> <div class="child"></div> </di ...

  4. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  5. 浅谈css的伪元素::after和::before

    css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...

  6. CSS居中demo

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

  7. css居中解决方案

    水平居中 行内或者具有行内元素性质的元素(比如文字或者链接)? 让一个父元素为块级元素的行内元素水平居中,可以:CSS: 1 2 3 .center-children { text-align: ce ...

  8. CSS 居中方法集锦

    记录收集纯CSS层面实现的水平.垂直居中方法可用于块级.行内快.内联元素以及文字图片等. 水平或垂直居中 1.1 text-align 1.2 margin 1.3 line-height 1.4 p ...

  9. css居中完全指南(翻译)

    最近参加了百度的前端技术学院,任务4是要求一个元素在父元素中水平和垂直居中,提供的一篇文章对各种情况都进行了分析,很不错,英文也不是那么难懂,毕竟代码还是主体,翻译过来分享出来,翻译内容带有自己的理解 ...

随机推荐

  1. 一起入门Python2之python的安装及初识

    鉴于论坛需要持续更新文章才能更好的保证论坛的访问量和质量,以及论坛的发展.承蒙前辈的信任和支持,我就教大家python第二课,教的不好请多担待和指正. 我们先讲python的安装方法: 方法链接:ht ...

  2. Flutter 中的常见的按钮组件 以及自定义按钮组件

    Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton. IconButton.OutlineButton.ButtonBar.Float ...

  3. 【转载】 漫谈Code Review的错误实践

    原文地址: https://www.cnblogs.com/chaosyang/p/code-review-wrong-practices.html ------------------------- ...

  4. RestSHarp

    异步扩展: public static class RestClientExtensions { private static Task<T> SelectAsync<T>(t ...

  5. Flink 实现指定时长或消息条数的触发器

    Flink 中窗口是很重要的一个功能,而窗口又经常配合触发器一起使用. Flink 自带的触发器大概有: CountTrigger: 指定条数触发 ContinuousEventTimeTrigger ...

  6. PhpStorm的主题和字体设置

    打开PhpStorm,点击File,然后点击Setting 然后 点击Apply,就可以看到主题变化的效果,其次就是来设置字体,先要选取一个样式,然后点击Save As ,然后命名,我选择的是最后一个 ...

  7. Top 10 Machine Learning Algorithms For Beginners

    Linear Regression Logistic regression KNN Classification Support Vector Machine (SVM) Decision Trees ...

  8. 15点睛Spring4.1-TaskExecutor

    转发:https://www.iteye.com/blog/wiselyman-2212679 15.1 TaskExecutor spring的TaskExecutor为在spring环境下进行并发 ...

  9. 什么是 CDN（超形象）

    原文地址:https://blog.csdn.net/lu_embedded/article/details/80519898 618电商节.双十一购物狂欢节,到底是什么在支撑数以万计的秒杀活动?这就 ...

  10. 【计算机视觉】基于OpenCV的人脸识别

    一点背景知识 OpenCV 是一个开源的计算机视觉和机器学习库.它包含成千上万优化过的算法,为各种计算机视觉应用提供了一个通用工具包.根据这个项目的关于页面,OpenCV 已被广泛运用在各种项目上,从 ...