css设置元素水平垂直居中的方法
2017-11-27 12:07
751 查看
看到标题,相信大家并不陌生。这个问题,经常会出现在面试题中。通常会要求面试者写出几种方法。那么,究竟有几种方法,每种方法的兼容情况如何,相信大家很少研究过。今天,我们就一起来看看。
通常分为2种情况,已知元素的宽度或未知。
我们先说说在已知的情况下,要如何设置。
举例说明:有2个元素,让子元素相对于父元素水平垂直居中。
html代码:
1、利用定位及设置元素margin值为自身的一半。
css代码:
说明:此方法,在我们工作中经常用到,兼容性好。demo
2、margin:auto
css代码:
说明: position: absolute; left: 0; right: 0; top: 0; bottom: 0;这是自动填充父元素的可用空间。然而给子元素设定了宽高,那么多余的空间,会被margin:auto平均分配。
查看demo
跟已知元素宽高相比,实现未知元素宽高水平垂直居中显示的方法较多。
1、利用css3属性transform实现。
css代码:
说明:这种方法在移动端被广泛使用。但是,只支持高版本浏览器(IE9+以上的浏览器支持)。demo
2、将父元素设置成display: table, 子元素设置为单元格 display: table-cell。这个方法跟上面介绍的方法不同,它不是让元素居中,而是让元素包含的内容居中。
css代码:
说明:利用表格的特性,将子元素看成行内元素,实现元素中的文字(文字可以是单行的,也可以是多行的)或图片水平垂直居中。demo
3、css3新的布局方法,弹性布局 display: flex。这个方法,在已知或未知元素宽高的情况下,都能使元素居中显示。
css代码:
说明: 此方法只支持IE9+以上的浏览器。display: flex代表弹性布局,align-items: center 代表垂直方向上的居中,justify-content: center代表水平方向上的居中。这些是css3中的新属性,感兴趣的同学可以查找相关资料学习。这里不多介绍。demo
通常分为2种情况,已知元素的宽度或未知。
我们先说说在已知的情况下,要如何设置。
举例说明:有2个元素,让子元素相对于父元素水平垂直居中。
html代码:
<div class="box"> <div class="innerbox">css设置元素水平垂直居中显示</div> </div>
1、利用定位及设置元素margin值为自身的一半。
css代码:
.box{ width: 400px; height: 200px; border: 5px solid #ddd; margin: 50px auto; position: relative; } .innerbox{ width: 300px; height: 100px; border: 5px solid #f00; font-size: 16px; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -150px; }
说明:此方法,在我们工作中经常用到,兼容性好。demo
2、margin:auto
css代码:
.box{ width: 400px; height: 200px; border: 5px solid #ddd; margin: 50px auto; position: relative; } .innerbox{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 300px; height: 100px; margin: auto; border: 5px solid #f00; }
说明: position: absolute; left: 0; right: 0; top: 0; bottom: 0;这是自动填充父元素的可用空间。然而给子元素设定了宽高,那么多余的空间,会被margin:auto平均分配。
查看demo
跟已知元素宽高相比,实现未知元素宽高水平垂直居中显示的方法较多。
1、利用css3属性transform实现。
css代码:
.box{ width: 400px; height: 200px; border: 5px solid #ddd; margin: 50px auto; position: relative; } .innerbox{ position: absolute; left: 50%; top: 50%; border: 5px solid #f00; transform: translate(-50%,-50%); }
说明:这种方法在移动端被广泛使用。但是,只支持高版本浏览器(IE9+以上的浏览器支持)。demo
2、将父元素设置成display: table, 子元素设置为单元格 display: table-cell。这个方法跟上面介绍的方法不同,它不是让元素居中,而是让元素包含的内容居中。
css代码:
.box{ width: 400px; height: 200px; border: 5px solid #ddd; margin: 50px auto; display: table; } .innerbox{ display: table-cell; vertical-align: middle; text-align: center; border: 5px solid #f00; }
说明:利用表格的特性,将子元素看成行内元素,实现元素中的文字(文字可以是单行的,也可以是多行的)或图片水平垂直居中。demo
3、css3新的布局方法,弹性布局 display: flex。这个方法,在已知或未知元素宽高的情况下,都能使元素居中显示。
css代码:
.box{ width: 400px; height: 200px; border: 5px solid #ddd; margin: 50px auto; display: flex; align-items: center; justify-content: center; } .innerbox{ width: 300px; /*宽度可以省略*/ height: 100px; /*高度可以省略*/ border: 5px solid #f00; font-size: 16px; }
说明: 此方法只支持IE9+以上的浏览器。display: flex代表弹性布局,align-items: center 代表垂直方向上的居中,justify-content: center代表水平方向上的居中。这些是css3中的新属性,感兴趣的同学可以查找相关资料学习。这里不多介绍。demo
相关文章推荐
- CSS实现垂直居中的常用方法 在前端开发过程中,盒子居中是常常用到的。其中 ,居中又可以分为水平居中和垂直居中。水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现。但是垂直
- CSS设置行内元素和块级元素的水平居中、垂直居中
- css元素水平垂直居中的十种方法
- css元素水平垂直居中的十种方法
- CSS实现元素水平/垂直居中的方法
- css 实现元素水平垂直居中总结5中方法
- CSS设置行内元素和块级元素的水平居中、垂直居中
- CSS实现父级元素属性display为block的元素垂直和水平居中的三种方法
- CSS使元素水平垂直居中的方法
- 利用css实现元素水平垂直居中的方法(分情况讨论)
- CSS实现元素水平、垂直居中的方法
- css中已知宽高的子元素水平垂直居中的三种方法
- css中已知宽高的子元素水平垂直居中的三种方法
- CSS实现元素水平/垂直居中的方法
- CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)
- css中已知宽高的子元素水平垂直居中的三种方法
- css中已知宽高的子元素水平垂直居中的三种方法
- css中元素水平垂直居中4种方法介绍
- CSS中元素水平居中和垂直居中的方法
- css中已知宽高的子元素水平垂直居中的三种方法