CSS控制居中是前端开发中非常常用的布局技能,本文列出几种CSS控制元素居中的几种方法。
一、水平居中
使用CSS控制水平居中很简单:
· 块级元素 设置width,并设置margin auto
· 内联元素 父元素设置text-align center
HTML代码如下:
- <div class="container">
- <div class="content">
- 水平居中哦
- div>
- div>
1. 块级元素水平居中
- .container {
- height: 300px;
- width: 300px;
- border: 1px solid red;
- }
- .content {
- width: 10rem;
- border: 1px solid green;
- margin: 0 auto;
- }
2. 内联元素水平居中
- .container {
- height: 300px;
- width: 300px;
- border: 1px solid red;
- text-align: center;
- }
- .content {
- display: inline-block;
- border: 1px solid green;
- }
代码很简单,而且没什么兼容性问题,所以通常也不需要用别的复杂方式来实现水平居中效果。
二、水平垂直居中
使用CSS控制垂直居中(或者水平垂直居中)就不像控制垂直居中那么方便,这里主要罗列几种。
1. flex布局
flex布局出现以后,垂直居中就很方便了,直接设置父元素:
- display flex
- align-items center
如果同时要水平居中,则同时设置:
- justify-content center
需要注意的是IE10+才支持,webkit前缀浏览器设置flex属性需要加webkit。
- .container {
- width: 300px;
- height: 300px;
- border: 1px solid red;
- display: -webkit-flex;
- display: flex; // 关键属性
- align-items: center; // 垂直居中
- justify-content: center // 水平居中
- }
- .content {
- border: 1px solid green;
- }
2. margin+ position:absolute布局
position: absolute布局的元素,通过设置top/bottom, left/right这两对属性,可以让元素在垂直方向和水平方向分别具有了自适应的特性。就像div在水平方向的默认表现一样!
上文中对于块级元素的水平居中,我们设置宽度然后配合以margin可以实现水平居中。而对于设置了top/bottom,left/right的absolute定位元素,我们设置宽高再配合margin就可以达到水平垂直居中:
- .container {
- width: 300px;
- height: 300px;
- position: relative;
- border: 1px solid red;
- }
- .content {
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- width: 200px;
- height: 100px;
- margin: auto;
- border: 1px solid green;
- }
兼容性很好,IE8以上支持。
>>本文地址:https://www.ujiuye.com/zhuanye/2020/53435.html
声明:本站稿件版权均属中公教育优就业所有,未经许可不得擅自转载。
1 您的年龄
2 您的学历
3 您更想做哪个方向的工作?