美文网首页
居中的几种方法

居中的几种方法

作者: U17 | 来源:发表于2018-07-04 11:32 被阅读0次

margin: 0 auto; text-align: center  居中 

当父元素设置了宽高 可用  margin: 0 auto; text-align: center  居中


通过display:flex实现CSS水平居中

通过display:flex实现CSS水平居中的原理是父元素display:flex;flex-direction:column;而子元素align-self:center;


通过display:table-cell和margin-left实现CSS水平居中

对于父元素和子元素的宽度都确定的情况,适合通过display:table-cell和margin-left实现CSS水平居中。使用时,父元素display:table-cell,子元素给剩余宽度一半的margin-left。


通过position:absolute实现CSS水平居中

这种方法跟上一个方法适用场景一样,也是适用于父元素和子元素的宽度都确定的情况。使用时,父元素position:absolute,子元素给剩余宽度一半的margin-left。


通过width:fit-content实现CSS水平居中

这种方法可以确保子元素宽度不确定的情况下,也能实现CSS水平居中。父元素宽度确定 给子元素加上 width:fit-content; margin:0 auto;  text-align:center;


通过display:inline-block和text-align:center实现CSS水平居中

父元素添加 display:inline-block  子元素添加 margin: 0 auto; text-align: center


通过position:relative、float:left和margin-left实现CSS水平居中

给父元素样式position:relative,给子元素float:left和margin-left就可以实现CSS水平居中。


相关文章

  • CSS垂直居中,你会多少种写法?

    CSS控制居中是前端开发中非常常用的布局技能,本文列出几种CSS控制元素居中的几种方法。  谈及HTML元素居中展...

  • CSS居中小结

    下面是CSS居中的几种方法: 水平居中元素: 通用方法,元素的宽高未知 方式一:CSS3 transform 方式...

  • CSS布局(不完全)总结

    CSS布局(不完全)总结 实现水平居中布局的几种方式 方法一: 通过以下CSS代码实现水平居中布局 方法二: 通过...

  • css几个经典布局实例

    一、水平居中   水平居中的页面布局中最为常见的一种布局形式,多出现于标题,下面介绍几种实现水平居中的方法。   ...

  • 居中的几种方法

    margin: 0 auto; text-align: center 居中 当父元素设置了宽高 可用margin:...

  • 几种垂直居中的方法

    如果父容器不固定高度,padding/line-height(慎用)即可实现元素的垂直居中 如果父容器固定高度 d...

  • 文字与元素居中的方式

    我们经常会让元素进行上下左右的居中,这里提供几种方法供大家使用 我们经常会让元素进行上下左右的居中,这里提供几种方...

  • 居中方法

    布局中经常会遇到让一个盒子水平且垂直居中的情况,以下总结了几种居中方法: margin固定宽高居中 负margin...

  • 页面中垂直居中的几种实现方法

    页面中垂直居中的几种方法: 1. 通过使用absolute定位来实现垂直居中 HTML: CSS: 2. 使用t...

  • CSS div居中的几种方法

    CSS实现div垂直居中的方法有很多,下面div居中的几种方法是自己平时写网页中经常用到的,最常见的例子就是登录注...

网友评论

      本文标题:居中的几种方法

      本文链接:https://www.haomeiwen.com/subject/inceuftx.html