css 的规律摸索之路(二)css之居中问题(垂直居中与水平居中)
来源:互联网 发布:淘宝卖家订购哪些服务 编辑:程序博客网 时间:2024/06/01 09:14
通过上篇css 的规律摸索之路(一)css之三角形的规律及变化,我们已经知道css三角形是怎么回事,现在我们来看看另外一个,常见的应用:css之居中问题(垂直居中与水平居中)
垂直居中
单行文本垂直居中
首先,说说最简单的常见居中方式-单行文本垂直居中:
<div class="single_line_text_box"> <div class="single_line_text">单行文本垂直居中</div> <!-- <img src="" alt="" class="single_line_text"> --></div><style> .single_line_text_box { height: 100px; width: 100%; background: #333; line-height: 100px; text-align: center; } .single_line_text { vertical-align: middle; position: relative; }</style>
这方式很简单,我们常用来做单行文本的垂直居中,它的用处也只限与垂直居中包含文本的容器和图片,并且宽高不能设定不然无法居中。
说明:通过父容器设定line-height,以及子元素设定vertical-align: middle;来实现,其中子元素垂直居中不能设定宽度和高度,子元素的内容必须为文本或图片,且文字尽量不能换行不然会溢出
display:table的方式
下来就是display:table的方式,这是一种借助表格样式的居中方式:
<div class="table_parent"> <div class="table_child">说明:通过父容器设定display: table;,以及子元素设定display: table-cell; vertical-align: middle;来实现,其中子元素设定的高度宽度无效,子元素的内容任意,内容为文字时自动换行照样居中</div></div><br><div class="table_parent"> <div class="table_child"><div class="table_child_content">display:table的方式</div></div> </div> <style> .table_parent { display: table; height: 100px; width: 100%; background: #eee; text-align: center; } .table_child { display: table-cell; vertical-align: middle; } .table_child_content { height: 20px; width: 500px; background: #aaa; display: inline-block; } </style>
这种方式的垂直居中效果如图:
说明:这种方式通过父容器设定display: table;,以及子元素设定display: table-cell; vertical-align: middle;来实现,其中子元素设定的高度宽度无效,子元素的内容任意,内容为文字时自动换行照样居中
绝对定位居中
绝对定位居中的方式,这是一种借助绝对定位和外边距的居中方式:
<div class="absolute_locating_parent"> <div class="absolute_locating_child">绝对定位居中</div> </div> <style> .absolute_locating_parent { height: 100px; width: 100%; position: relative; background: #eee; } .absolute_locating_child { margin: auto; position: absolute; width: 100px; height: 50px; background: #aaa; top: 0; left: 0; bottom: 0; right: 0; } </style>
这种方式的垂直居中效果如图:
说明:通过父容器设定position: relative;,子元素设定margin: auto; position: absolute;top: 0; left: 0; bottom: 0; right: 0;来实现,其中子元素必须固定宽高,子元素的内容任意。其中绝对定位居中支持跨浏览器,包括IE8-IE10,不论是否设置padding都可居中(在不使用box-sizing属性的前提下),完美支持图片居中。但是.必须声明高度以及设置overflow:auto来防止内容越界溢出,在Windows Phone设备上不起作用。
弹性盒居中对齐
通过弹性盒来实现居中对齐,本人推荐的居中方式,但是注意兼容性。
<div class="elastic_box_centering"> <div class="iconloader"> <!-- <div class="iconloader_child"></div> --> Loader... </div> </div> <style> .elastic_box_centering { display: flex; align-items: center; /*定义元素垂直居中*/ justify-content: center; /*定义容器里的元素水平居中*/ width: 100%; height: 300px; background: #eee; } .iconloader { background: #aaa; } /*.iconloader_child { width: 50px; height: 50px; }*/ </style>
这种方式的垂直居中效果如图:
说明:通过弹性魔盒来实现居中,这种方式特别优雅只需要给父元素添加就可以,不论你子元素是什么样子都居中
绝对定位和负margin
通过padding等份自填充来实现居中对齐的假象,除非特殊环境不然尽量不要使用这种居中方式。
div class="absolute_locating_margin"> <div class="absolute_locating_margin_child">绝对定位和负margin</div></div><style> .absolute_locating_margin { height: 100px; width: 100%; background: #eee; position: relative; } .absolute_locating_margin_child { position: absolute; top: 50%; left: 50%; height: 50px; width: 180px; margin: -25px 0 0 -90px; background: #999; }</style>
这种方式的垂直居中效果如图:
说明:这种方式是通过定位然后利用margin弥补定位来实现的居中,其子元素的宽度和高度必须固定
padding居中假象
通过padding等份自填充来实现居中对齐的假象,除非特殊环境不然尽量不要使用这种居中方式。
<div class="padding_center"> <div class="padding_center_child">padding居中</div></div><style> .padding_center { padding: 5% 0; width: 100%; background: #eee; } .padding_center_child { text-align: center; background: #999; color: #fff; padding: 10% 0; }</style>
这种方式的垂直居中效果如图:
说明:这种方式是通过padding填充来实现的假象,其父元素和子元素的高度是未知,由浏览器自由定义
到此垂直居中基本赘述完毕,其实还有几种但是个人觉得有些无脑加胡闹
水平居中
text-align内容居中
我们常用这种方式来进行居中,对于需要居中的都得是行内元素或内联块元素。
<div class="center"> <div class="center_child">内容居中</div></div><style> .center { height: 500px; width: 100%; background: #eee; text-align: center; } .center_child { display: inline-block; width: 70px; height: 70px; background: #999; }</style>
margin: 0 auto;
对于这个大家一定很熟悉,很常用。
<div class="margin_center"> <div class="margin_center_child">内容居中</div></div><style> .margin_center { height: 500px; width: 100%; background: #eee; } .margin_center_child { width: 70px; height: 70px; background: #999; margin: 0 auto; }</style>
说明:margin: 0 auto;这种居中方式特别适合宽和高固定的,但是不知道宽的他就解决不了了,于是下面的孕育而生
table+margin
对于这个大家就不一定很熟悉,其实很简单,给子元素加上display: table;
这句话就可以了
<div class="table_margin_center"> <div class="table_margin_center_child">table_margin_center居中</div></div><style> .table_margin_center { height: 500px; width: 100%; background: #eee; } .table_margin_center_child { background: #999; display: table; margin: 0 auto; }</style>
小结
到此常见的居中方式就完毕了,我们可以对与两个进行配合应用。
提示:后面还有精彩敬请期待,请大家关注我的CSDN博文:侬姝沁儿,或者我的简书专题:web前端。如有意见可以进行评论,每一条评论我都会认真对待。
- css 的规律摸索之路(二)css之居中问题(垂直居中与水平居中)
- CSS之水平垂直居中
- CSS之水平垂直居中
- CSS的水平居中与垂直居中
- CSS之元素水平/垂直居中问题
- CSS布局div之水平居中与垂直居中
- CSS居中之美(二)——水平居中
- CSS水平居中与垂直居中
- CSS垂直与水平居中
- css水平与垂直居中
- css定位“十字架“之水平垂直居中
- 解读CSS布局之-水平垂直居中
- CSS布局之水平垂直居中
- css布局之水平垂直居中
- 解读CSS布局之-水平垂直居中
- CSS布局之水平垂直居中
- 解读 CSS 布局之水平垂直居中
- CSS布局之-水平垂直居中
- Android proguard代码优化去日志
- JAVA-1002. 写出这个数 (20)
- CodeForces 185A. Plant (矩阵快速幂)
- 树莓派3b+控制舵机、伺服电机的驱动代码。
- 石子合并
- css 的规律摸索之路(二)css之居中问题(垂直居中与水平居中)
- ABP官方文档翻译 3.4 领域服务
- JavaBean的三种标记
- 计算机硬件基础
- [数据结构]栈的实现-C++
- 语法
- 【MFC】生成一条三次Bezier曲线
- 将javaweb项目部署到阿里云
- c++作业6