css实现元素水平垂直居中
2018-03-11 15:34
946 查看
在我学习的过程中,css中元素实现水平垂直居中还是蛮常用的,下面是我了解到的几种方法,希望对大家有帮助,大家有更好的方法,欢迎大家补充。
元素水平居中的方法我了解到有5种,分别是 绝对定位利用负边距、绝对定位+margin:auto;、弹性盒子Flex、Transform和Table。
首先HTML代码: <div class="wrap">
<div class="center"></div>
</div>
1、绝对定位,利用负边距。
利用负边距实现元素的水平垂直居中,首先相对于父元素(position:relative;),子元素要position:absolutue;并且子元素要设宽(width)高(height),设置left:50%;top:50%;最后加上负边距,margin-left:width的一半;margin-right:height的一半;。
其实很好理解,子元素绝对定位,那么子元素就是通过自身的边界(margin)相对于父元素进行定位;当我们把left:50%;top:50%;的时候,就相当于子元素的左边界和上边界都在整个界面50%的地方,也可以理解为,子元素左上角的位置水平垂直居中整个界面。那我们就通过负边距来调整子元素中心点代替左上角的位置,来实现子元素水平垂直居中。margin-left:width的一半;margin-right:height的一半;。
上代码:.wrap{
position:relative;
width:200px;
height:200px;
background-color:green;
}
.center{
position:absolute;
width:100px;
height:100px;
background-color:black;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
}效果如下:
2、Transform
利用css3中的transform属性
代码如下:.wrap{
position:relative;
width:200px;
height:200px;
background-color:green;
display:flex;
}
.center{
position:absolute;
width:100px;
height:100px;
background-color:black;
top:50%;
left:50%;
transform:translate3d(-50%,-50%,0);
}效果如下:
这种方法不建议在pc端使用,在移动端大可放心使用。这种方法好处就是,不用像方法1通过负边距来实现元素的水平垂直居中。
3、绝对定位+margin:auto;
子元素绝对定位,并且设置子元素top:0;bottom:0;right:0;left:0;margin:auto;
理解一下:当我们给子元素设置top:0;bottom:0;right:0;left:0;浏览器就会重新给子元素分配一个边界框,子元素会填充整个父级元素的可用空间,我们给子元素设置宽高,防止子元素占据父元素整个可用空间。再给子元素加上margin:auto;那么margin-top和margin-bottom一样,margin-left和margin-right一样,子元素就在父元素中水平垂直居中。
代码如下:.wrap{
position:relative;
width:200px;
height:200px;
background-color:green;
}
.center{
position:absolute;
width:100px;
height:100px;
background-color:black;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}效果如下:
4、弹性盒子Flex
用到css3中的属性,flex布局为弹性布局,只需将父元素设置三个属性即可(display,justify-content,align-items)
代码:<div class="wrap">
<div class="center">
弹性布局flex
</div>
这种方法比较简洁,不需要给元素设宽高就可以实现水平垂直居中。
5、Table模拟表格效果<div class="wrap">
<div class="center">
table模拟表格
</div>
情况一:
组合使用display:table-cell和vertical-align、text-align,使父元素内的所有行内元素水平垂直居中(子元素设置display:inline-block即可)。这在子元素不确定宽高和数量时,特别实用!.wrap{
width:200px;
height:200px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid red;
}
.center{
display:inline-block;
}效果如下:
情况二:
对table-cell元素设置百分比(如100%)的宽高值时无效的,但是可以将父元素设置display:table,再将父元素设置百分比宽高,子元素table-cell会自动撑满父元素。这就可以做相对于整个页面的水平垂直居中。
.wrap{
width:100%;
height:100%;
display:table;
}
.center{
vertical-align:middle;
text-align:center;
display:table-cell;
border:2px solid red;
}
总结一下: 1.利用负边距方法优点是具有良好的跨浏览器特性,兼容IE6/IE7,但是缺点是不能自适应,需设置子元素的宽高,不支持百分比。2.利用margin:auto方法支持跨浏览器,支持百分比,但是必须声明子元素的width或height(至少一项,不然会占据父元素所有空间)。这两种绝对定位的方法,可在子元素中设置overflow:auto;来防止内容越界溢出。3.利用flex或transform方法的好处是代码量少,且你不用设置子元素的width与height,内容可由子元素里的子元素任意撑开,优雅地溢出。但flex IE8/IE9不支持,transform IE8不支持,且属性需要写浏览器厂商前缀。4.table方法的好处是没有空间的限制,可以根据元素内容动态的改变高度,素的内容不会因为没足够的空间而被切断或者出现难看的滚动条。但在IE6-7下无法正常运行,结构也更复杂。
元素水平居中的方法我了解到有5种,分别是 绝对定位利用负边距、绝对定位+margin:auto;、弹性盒子Flex、Transform和Table。
首先HTML代码: <div class="wrap">
<div class="center"></div>
</div>
1、绝对定位,利用负边距。
利用负边距实现元素的水平垂直居中,首先相对于父元素(position:relative;),子元素要position:absolutue;并且子元素要设宽(width)高(height),设置left:50%;top:50%;最后加上负边距,margin-left:width的一半;margin-right:height的一半;。
其实很好理解,子元素绝对定位,那么子元素就是通过自身的边界(margin)相对于父元素进行定位;当我们把left:50%;top:50%;的时候,就相当于子元素的左边界和上边界都在整个界面50%的地方,也可以理解为,子元素左上角的位置水平垂直居中整个界面。那我们就通过负边距来调整子元素中心点代替左上角的位置,来实现子元素水平垂直居中。margin-left:width的一半;margin-right:height的一半;。
上代码:.wrap{
position:relative;
width:200px;
height:200px;
background-color:green;
}
.center{
position:absolute;
width:100px;
height:100px;
background-color:black;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
}效果如下:
2、Transform
利用css3中的transform属性
代码如下:.wrap{
position:relative;
width:200px;
height:200px;
background-color:green;
display:flex;
}
.center{
position:absolute;
width:100px;
height:100px;
background-color:black;
top:50%;
left:50%;
transform:translate3d(-50%,-50%,0);
}效果如下:
这种方法不建议在pc端使用,在移动端大可放心使用。这种方法好处就是,不用像方法1通过负边距来实现元素的水平垂直居中。
3、绝对定位+margin:auto;
子元素绝对定位,并且设置子元素top:0;bottom:0;right:0;left:0;margin:auto;
理解一下:当我们给子元素设置top:0;bottom:0;right:0;left:0;浏览器就会重新给子元素分配一个边界框,子元素会填充整个父级元素的可用空间,我们给子元素设置宽高,防止子元素占据父元素整个可用空间。再给子元素加上margin:auto;那么margin-top和margin-bottom一样,margin-left和margin-right一样,子元素就在父元素中水平垂直居中。
代码如下:.wrap{
position:relative;
width:200px;
height:200px;
background-color:green;
}
.center{
position:absolute;
width:100px;
height:100px;
background-color:black;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}效果如下:
4、弹性盒子Flex
用到css3中的属性,flex布局为弹性布局,只需将父元素设置三个属性即可(display,justify-content,align-items)
代码:<div class="wrap">
<div class="center">
弹性布局flex
</div>
.wrap{ width:200px; height:200px; background-color:green; display:flex; display:-webkit-flex; justify-content:center; align-items:center; }效果:
这种方法比较简洁,不需要给元素设宽高就可以实现水平垂直居中。
5、Table模拟表格效果<div class="wrap">
<div class="center">
table模拟表格
</div>
情况一:
组合使用display:table-cell和vertical-align、text-align,使父元素内的所有行内元素水平垂直居中(子元素设置display:inline-block即可)。这在子元素不确定宽高和数量时,特别实用!.wrap{
width:200px;
height:200px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid red;
}
.center{
display:inline-block;
}效果如下:
情况二:
对table-cell元素设置百分比(如100%)的宽高值时无效的,但是可以将父元素设置display:table,再将父元素设置百分比宽高,子元素table-cell会自动撑满父元素。这就可以做相对于整个页面的水平垂直居中。
.wrap{
width:100%;
height:100%;
display:table;
}
.center{
vertical-align:middle;
text-align:center;
display:table-cell;
border:2px solid red;
}
总结一下: 1.利用负边距方法优点是具有良好的跨浏览器特性,兼容IE6/IE7,但是缺点是不能自适应,需设置子元素的宽高,不支持百分比。2.利用margin:auto方法支持跨浏览器,支持百分比,但是必须声明子元素的width或height(至少一项,不然会占据父元素所有空间)。这两种绝对定位的方法,可在子元素中设置overflow:auto;来防止内容越界溢出。3.利用flex或transform方法的好处是代码量少,且你不用设置子元素的width与height,内容可由子元素里的子元素任意撑开,优雅地溢出。但flex IE8/IE9不支持,transform IE8不支持,且属性需要写浏览器厂商前缀。4.table方法的好处是没有空间的限制,可以根据元素内容动态的改变高度,素的内容不会因为没足够的空间而被切断或者出现难看的滚动条。但在IE6-7下无法正常运行,结构也更复杂。
相关文章推荐
- CSS 实现:元素相对于文档水平垂直居中
- CSS实现元素水平垂直居中—喜欢对称美,这病没得治
- css 实现元素水平垂直居中总结5中方法
- 纯css实现全兼容的元素水平垂直居中
- 利用css实现元素水平垂直居中的方法(分情况讨论)
- css实现高度不固定的div元素模块在页面中水平垂直居中
- CSS实现父级元素属性display为block的元素垂直和水平居中的三种方法
- 根据HTML+CSS完成一个三列布局,左右侧栏宽为180px,高为300px;中间栏自适应,高为300px;中间栏子元素(宽高不确定)实现水平、垂直居中。
- CSS实现元素水平、垂直居中的方法
- CSS实现元素水平/垂直居中的方法
- css实现元素水平垂直居中
- 【Web】CSS实现绝对定位元素水平垂直居中
- CSS实现文字或图片等元素垂直、水平、绝对定位居中技术
- 纯css实现元素水平垂直居中
- css实现块级元素水平和垂直居中
- CSS实现垂直居中的常用方法 在前端开发过程中,盒子居中是常常用到的。其中 ,居中又可以分为水平居中和垂直居中。水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现。但是垂直
- CSS实现元素水平/垂直居中的方法
- 用 CSS 和 JS 实现元素的水平垂直居中
- css系列(布局):实现一个元素在浏览器中水平、垂直居中的几个方案
- css几种方法使元素水平垂直居中