CSS居中布局的技巧有哪些

本篇内容主要讲解“CSS免费云主机、域名居中布局的技巧有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS居中布局的技巧有哪些”吧!水平居中元素：方式一：CSS3 transform.parent {position: relative;}.child {position: absolute;left: 50%:transform: translateX(-50%);}方式二：flex 布局.parent {display: flex;justify-content: center;}适用于子元素为浮动，绝对定位，内联元素，均可水平居中。居中的元素为常规文档流中的内联元素(display: inline)常见的内联元素有：span, a, img, input, label 等等.parent {text-align: center;}居中的元素为常规文档流中的块元素(display: block)常见的块元素：div, h2~h7, table, p, ul, li 等等方式一：设置 margin.parent {width: 100%;}.child {width: 600px;height: 50px;margin: 0 auto;background: #999;}方式二：修改为 inline-block 属性.parent {text-align: center;}.child {display: inline-block;}.child {width: 100px;float: left;position: relative;left: 50%;margin-left: -50px;}方式一：.parent {position: relative;}.child {position: absolute;width: 100px;left: 50%;margin-left: -50px;}方式二：.parent {position: relative;}.child {position: absolute;width: 100px;left: 0;right: 0;margin: 0 auto;}垂直居中元素：方式一：CSS3 transform.parent {position: relative;}.child {position: absolute;top: 50%;transform: translateY(-50%);}方式二：flex 布局.parent {display: flex;align-items: center;}适用于子元素为浮动，绝对定位，内联元素，均可垂直居中。.text {line-height: 200px;height: 200px;}方式一：.parent {position: relative;}.child{position: absolute;top: 50%;height: 100px;margin-top: -50px;}方式二：.parent {position: relative;}.child{position: absolute;top: 0;bottom: 0;height: 100px;margin: auto 0;}垂直居中元素：div {width: 100px;height: 100px;margin: auto;position: fixed;//absolute is oktop: 0;right: 0;bottom: 0;left: 0;}优点：不仅可以实现在正中间，还可以在正左方，正右方元素的宽高支持百分比 % 属性值和 min-/max- 属性可以封装为一个公共类，可做弹出层浏览器支持性好.child {width: 100px;height: 100px;position: absolute;top: 50%;left: 50%;margin-left: -50px;margin-top: -50px;}特点：良好的跨浏览器特性,兼容 IE6 – IE7灵活性差，不能自适应，宽高不支持百分比尺寸和 min-/max- 属性.child {width: 100px;height: 100px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}特点：内容可自适应，可以封装为一个公共类，可做弹出层可能干扰其他 transform 效果.parent {display: flex;justify-content: center;align-items: center;}这是 CSS 布局未来的趋势。Flexbox 是 CSS3 新增属性，设计初衷是为了解决像垂直居中这样的常见布局问题。text {height: 100px;line-height: 100px;text-align: center;}到此，相信大家对“CSS居中布局的技巧有哪些”有了更深的了解，不妨来实际操作一番吧！这里是云技术网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: jQuery.param怎么用

本篇内容主要讲解“jQuery.param怎么用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jQuery.param怎么用”吧! 　　在 jQuery 1.4 HTML5中input元素也是序列化的元素。 　　我…