【CSS】几种让元素居中的方法(包括垂直居中和水平居中),网页示图
目录
前言
正文
一、让元素垂直居中显示的几种方法
二、让元素水平居中显示的几种方法
三、垂直居中一起使用的方法(上述结合使用)
总结
前言
实现元素居中其实有很多方法,掌握一种其实是不够的,因为在不同的布局和需求面前,就要选择不同的解决方案,有时候自己在设计页面的时候,居中也是一个比较苦恼的问题,下面就来分析一下各种实现居中的方法,以及不同场合的使用情况。
正文
一、让元素垂直居中显示的几种方法
1、使用表格的 vertical-align(垂直对齐) 的property属性。
说明
vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
middle | 把此元素放置在父元素的中部。 |
<div class="wrapper">
<div class="cell">
<div class="content">
//
</div>
</div>
</div>
.wrapper {
display: table;
background: rgb(159, 200, 214);
height: 150px;
overflow: hidden;
}
.cell {
display: table-cell;
vertical-align: middle;
background: rgb(209, 171, 159);
height: 100px;
}
效果:
优缺点:
优点:content 可以动态改变高度(不需在CSS 中定义)。当 wrapper 里没有足够空间时, content 不会被截断
缺点:InternetExplorer(甚至 IE8 beta)中无效,许多嵌套标签,内容过多时宽度可控但是高度不可控。
2、使用绝对定位的 div,把它的 top 设置为 50%,top margin 设置为负的 content 高度/2。
<div class="box2">
<div class="content2">
//
</div>
</div>
.box2 {
width: 400px;
height: 300px;
background: rgb(160, 112, 112);
position: relative;
}
.content2 {
position: absolute;
top: 50%;
height: 150px;
width: 300px;
margin-top: -75px;
/* negative half of the height */
background: rgb(167, 200, 216);
overflow: auto;
}
效果:
优缺点:
可以设置宽高,高必须设置,这意味着对象必须在 CSS 中指定固定的高度。因为有固定高度,或许你想给 content 指定 overflow:auto,这样如果 content 太多的话,就会出现滚动条,以免content 溢出。
优点:适用于所有浏览器<br>不需要嵌套标签
缺点:没有足够空间时,content 会消失(类似div 在 body 内,当用户缩小浏览器窗口,滚动条不出现的情况)
3、加上floater的div,floater的height:为box的50%;margin-bottom: 为content的高加上下内边距 / 2
<div class="box">
<div class="floater"></div>
<div class="content3">
//
</div>
</div>
.box {
width: 400px;
height: 300px;
background: rgb(212, 159, 159);
}
.floater {
height: 50%;
margin-bottom: -80px;
/* content的高加上下内边距 / 2*/
}
.content3 {
width: 300px;
height: 140px;
background: #abc;
overflow: auto;
}
效果:
这个方法的思想其实就是借助一个额外的floater元素将content间接地置位父元素的中间。
优缺点:
优点:
- 适用于所有浏览器
- 没有足够空间时(例如:窗口缩小) content 不会被截断,滚动条出现(这里的滚动条是指窗口的滚动条)
缺点:需要额外的空元素
4、使用了一个 position:absolute
<div class="box2">
<div calss="content4">
//
</div>
</div>
.box2 {
width: 400px;
height: 300px;
background: rgb(160, 112, 112);
position: relative;
}
.content4 {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
height: 220px;
width: 70%;
background: #abc;
overflow: auto;
}
效果:
有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度,其实并不能和上下都间距为 0,因此 margin:auto; 会使它居中。使用margin:auto;使块级元素垂直居中是很简单的。
优点:简单
缺点:
- IE(IE8 beta)中无效
- 无足够空间时,content 被截断,但是不会有滚动条出现(浏览器窗口的滚动条),需要添加overflow: auto;
5、只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。这个方法只能将单行文本置中
<div class="box2">
<div class="content5">
只能一行
</div>
</div>
.box2 {
width: 400px;
height: 300px;
background: rgb(160, 112, 112);
position: relative;
}
.content5 {
height: 200px;
line-height: 200px;
background: rgb(204, 187, 238);
}
效果:
优点:
- 适用于所有浏览器
- 无足够空间时不会被截断
缺点:
- 只对文本有效(块级元素无效)
- 多行时,断词比较糟糕
- 这个方法在小元素上非常有用,例如使按钮文本或者单行文本居中。
6、利用flex布局"弹性布局"
这个方法用的比较高级,可以应用到多个块元素需要规范的时候,当子元素有多个的时候,平均分配空间用弹性布局就最好不过,当然,当只有一个子元素时,就可以实现居中了。
<div class="parent">
<div class="children">
//
</div>
</div>
.parent {
width: 300px;
height: 200px;
background: #09c;
display: flex;
align-items: center;
}
.children {
width: 150px;
height: 150px;
background-color: #eee;
border: 1px dashed #000;
overflow: auto;
/*如果children下面还有子元素的话,可以嵌套使用*/
/* display: flex;
justify-content: center;
align-items:center; */
}
优点:
- 不同通过计算
- 可嵌套使用
缺点:无足够空间时,content 被截断(被浏览器),但是不会有滚动条出现
二、让元素水平居中显示的几种方法。
1.使用自动外边距实现居中
<div class="box2">
<div class="container1">
//
</div>
</div>
.box2 {
width: 400px;
height: 300px;
background: rgb(160, 112, 112);
position: relative;
}
.container1 {
margin-left: auto;
margin-right: auto;
width: 200px;
background: #abc;
}
CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的margin-left和margin-right属性设置为auto即可。在实际使用中,我们可以为这些需要居中的元素创建一个起容器作用的div。需要特别注意的一点就是,必须为该容器指定宽度
优点:最正确、最合理的方法,简单
缺点:IE6以下版本不支持
2.使用text-align实现文字居中
<div class="container2">
//
</div>
.container2 {
width: 300px;
background: #eee;
text-align: center;
}
body{text-align:center;},body的所有子孙元素文字都会被居中显示.
优点:兼容大多数浏览器
缺点:这种方法并没有将文本属性应用到文本上,而是应用到了作为容器的元素上,因此要额外的将文本属性的text-align设置为left。真正完全遵循标准的浏览器并不会改变容器的位置,而只会让其中的文字居中显示。
3.组合使用自动外边距和文本对齐
<div class="box2">
<div class="container3">
//
</div>
</div>
.box2 {
width: 400px;
height: 300px;
background: rgb(160, 112, 112);
position: relative;
}
.container3 {
margin-left: auto;
margin-right: auto;
border: 1px solid red;
width: 300px;
text-align: left;
}
因为文本对齐居中方式有着良好的向下兼容性,且自动外边距方式也被大多数当代浏览器支持,所以很多设计师将二者组合起来使用,以期让居中效果得到最大限度的跨浏览器支持:
优点:让居中效果得到最大限度的跨浏览器支持
缺点:需要附加的规则
4.负外边距解决方案
<div class="box2">
<div class="container4">
//
</div>
</div>
.box2 {
width: 400px;
height: 300px;
background: rgb(160, 112, 112);
position: relative;
}
.container4 {
background: rgb(255, 255, 168);
position: absolute;
left: 50%;
width: 300px;
margin-left: -150px;
text-align: left;
}
负外边距解决方案远不是仅仅为元素添加负外边距这么简单。这种方法需要同时使用绝对定位和负外边距两种技巧。
优点:
- 适用于所有浏览器
- 不需要嵌套标签
缺点:需要设置container的宽度,并计算
5、利用flex布局"弹性布局"
<div class="parent">
<div class="children">
//
</div>
</div>
.parent {
width: 300px;
height: 200px;
background: #09c;
display: flex;
justify-content: center;
}
.children {
width: 150px;
height: 150px;
background-color: #eee;
border: 1px dashed #000;
overflow: auto;
/*如果children下面还有子元素的话,可以嵌套使用*/
/* display: flex;
justify-content: center;
align-items:center; */
}
justify-content: center; /* 水平居中 */
优点:
- 不同通过计算
- 可嵌套使用
缺点:无足够空间时,container被截断(相对于浏览器),但是不会有滚动条出现
三、垂直居中一起使用的方法(上述结合使用)
1、使用了一个 position:absolute
<div class="box2">
<div class="content4">
//
</div>
</div>
.box2 {
width: 400px;
height: 300px;
background: rgb(160, 112, 112);
position: relative;
}
.content4 {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
height: 220px;
width: 70%;
background: #abc;
overflow: auto;
}
2、利用flex布局"弹性布局"
<div class="parent">
<div class="children">
//
</div>
</div>
.parent {
width: 300px;
height: 200px;
background: #09c;
display: flex;
justify-content: center;
align-items:center;
}
.children {
width: 150px;
height: 150px;
background-color: #eee;
border: 1px dashed #000;
overflow: auto;
/*如果children下面还有子元素的话,可以嵌套使用*/
/* display: flex;
justify-content: center;
align-items:center; */
}
总结
理解起来并不难,重要的是自己尝试的去看看效果,才能真正的明白。