前端学习笔记 - CSS - 水平居中和垂直居中
[转]来自于慕课网学习整理。
CSS学习--水平垂直居中方法
一、水平居中设置
1、行内元素
如果被设置元素为文本、图片等行内元素时:水平居中是通过给父元素设置text-align:center来实现的。
ps:text-align只用于块级元素的内联内容。
html代码:
<body> <div class="txtCenter">我想要在父容器中水平居中显示。</div> </body>
css代码:
<style> .txtCenter{ text-align:center; } </style>
2、定宽块级元素
满足定宽(宽度width为固定值)和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
html代码:
<body> <div>我是定宽块状元素,哈哈,我要水平居中显示。</div> </body>
css代码:
<style> div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ }
3、不定宽块状元素方法
方法一:
加入table标签,利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。
第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。
html代码:
<div> <table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody> </table> </div>
css代码:
<style> table{ border:1px solid; margin:0 auto; } </style>
或者,更简洁的办法:
div{
background:#ccc;
display:table;
margin:0 auto;
}
ps:利用 display:table; 把<div>元素默认的“块级”性质,改为类似<table>元素的“块级表格”性质,这样就不用在<div>的外层添加<table>标签组了
方法二:
改变想设置的块级元素的 display 为 inline 类型(设置为 行内元素 显示),然后在其父容器使用 text-align:center
来实现居中效果。
html代码:
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body>
css代码:
<style> .container{ text-align:center; } .container ul{ display:inline; } .container li{ display:inline; } </style>
方法三:
通过给父元素设置float,然后给父元素设置position:relative和left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。 ps:float属性不继承。
我们可以这样理解:
1. 把父元素浮动到左边,同时向右偏移50%,相当于把父元素的左边缘对齐到整行的中间。
2.把子元素向左偏移50%,这个50%是父元素的50%,此时子元素刚好居中。
代码如下:
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body>
css代码:
<style> .container{ float:left; position:relative; left:50% } .container ul{ position:relative; left:-50%; }
另外的解释:
例如下面代码中,inner想要在outer内水平居中,给inner外部添加了一个wrap包裹:
<div class="outer">
<div class="wrap">
<div class="inner"></div>
</div>
</div>
CSS代码为:
.wrap{
float:left;
position:relative;
left:50%;
}
.outer{
width:300px;
height:400px;
background:#FFCC99;
}
.inner{
width:100px;
height:100px;
background:#C33;
position:relativ;
left:-50%;}
如:
.wrap 左浮动50%,相当于它的左边位于 .out 的中线
.inner 左浮动-50%,就相当于以.out的中线为基准左移一般,于是就居中了。
四、垂直居中
1、父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是:
通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 )。
line-height 与 font-size 的计算值之差,在 CSS 中成为“行间距”。分为两半,分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端:当文字内容的长度大于块的宽时,就有内容脱离了块。
如下代码:
<div class="container"> hi,imooc! </div>
css代码:
<style> .container{ height:100px; line-height:100px; background:#999; } </style>
2、垂直居中一张图片,代码如下
1 2 3 |
<div id="parent"> <img src="image.png" alt="" /> </div> |
1 2 3 4 5 6 |
#parent {
line-height: 200px;
}
#parent img {
vertical-align: middle;
} |
3、父元素高度确定的多行文本
方法一:
使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。在父元素设置此样式时,会对inline-block类型的子元素都有用。
html代码:
<body> <table><tbody><tr><td class="wrap"> <div> <p>看我是否可以居中。</p> </div> </td></tr></tbody></table> </body>
css代码:
table td{height:500px;background:#ccc;vertical-align:middle}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。
或者:
div{ height:300px; background:#ccc; display:table;}
方法二:
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell(设置为表格单元显示),激活 vertical-align属性,但注意 IE6、7 并不支持这个样式, 兼容性比较差。
1 2 3 |
<div id="parent"> <div id="child">Content here</div> </div> |
1 2 3 4 5 |
#parent {display: table;} #child { display: table-cell; vertical-align: middle; } |
低版本 IE fix bug:
1 2 3 |
#child { display: inline-block; } |
4、垂直居中块级元素
定义一个需要垂直居中的div元素,他的宽度和高度均为300px,背景色为橙色。首先我们实现水平居中,上面已经提到过了,可以通过设置margin: 0 auto实现水平居中,代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> .content { width: 300px; height: 300px; background: orange; margin: 0 auto; } </style> </head> <body> <div class="content"></div> </body> </html>
接下来,需要做的事情就是要让div往下移动了。我们都知道top属性可以使得元素向下偏移的。但是,由于默认情况下,元素在文档流里是从上往下、从左到右紧密的布局的,我们不可以直接通过top属性改变它的垂直偏移。这就需要使用position属性,设置它的值为relative,就可以通过top、bottom、right、left等属性使它在正常的文档流中发生位置偏移(注意,此时它在并没有脱离文档流,原来的位置还会占据着的!)。垂直偏移需要用到top属性,它的值可以是具体的像素,也可以是百分数。因为我们现在不知道父元素(即body)的具体高度,所以,是不可以通过具体像素来偏移的,而应该用百分数。既然是要让它居中嘛!好,那么我们就让它的值为50%不就行了吗?
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto; /*水平居中*/
position: relative;
top: 50%; /*偏移*/
}
这时候,我们可以使用通过margin-top属性来设置,因为div的自身高度是300,所以,需要设置他的margin-top值为-150。为什么是要设置成负数的呢?因为正数是向下偏移,我们是希望div向上偏移,所以应该是负数,如下:
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto; /*水平居中*/
position: relative; /*脱离文档流*/
top: 50%; /*偏移*/
margin-top: -150px;
}
三、水平垂直居中:
1、绝对定位元素的居中实现
兼容性不错的主流用法是:
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 宽度的一半 */
}
但,这种方法有一个很明显的不足,就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时,往往要借助JS获得。
CSS3的兴起,使得有了更好的解决方法,就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的,于是,我们可以:
.element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */ }
于是乎,无论绝对定位元素的尺寸是多少,其都是水平垂直居中显示的。
然,问题很明显,兼容性不好。IE10+以及其他现代浏览器才支持, IE9(-ms-), IE10+以及其他现代浏览器才支持。中国盛行的IE8浏览器被忽略是有些不适宜的(手机web开发可忽略)。
2、margin:auto实现绝对定位元素的居中
实际上,绝对定位元素的居中实现还有另外一种方法,可以说是权衡了上面的尺寸自适应以及兼容性的一个方案,其实现的核心是margin:auto
.
首先,我们来看下CSS代码:
.element {
width: 600px; height: 400px;
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto; /* 有了这个就自动居中了 */
}
上下左右均0位置定位;margin: auto
于是,就居中了。上面代码的width: 600px height: 400px仅是示意,你修改为其他尺寸,或者不设置尺寸(需要是图片这种自身包含尺寸的元素),都是居中显示的。很有意思的~~对了,该方法IE8+以及其他浏览器都是OK的。