您的位置：首页 > Web前端 > CSS

块级元素以及行内元素居中显示

2015-03-30 00:01 330 查看

方法一：利用绝对定位实现元素垂直，水平居中显示：

<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
border: 0;
}
#container{
position: relative;
width: 400px;
height: 300px;
background-color: #ABC;
}
#center{
position: absolute;
width: 120px;
height: 120px;
top: 50%;
left: 50%;
margin-top: -60px;
margin-left: -60px;
background-color: #ACC;
}
</style>
</head>
<body>
<div id="container">
<div id="center">
</div>
</div>
</body>
</html>


以上方法是我认为最好用的，不过缺点是需要知道元素的宽度和高度。通过设置需要定位的div元素为position: absolute, 然后通过top:50%, left:50%再加上margin-top: 负div高度的一半，margin-left:负div宽度的一半。

方法一也适用于img ,span等行内元素。

方法二：利用margin: 0 auto实现块级元素水平居中：

<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
border: 0;
}
#container{
width: 400px;
height: 300px;
background-color: #ABC;
}
#center{
margin: 0 auto;
width: 120px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="container">
<div id="center"></div>
</div>
</body>
</html>


此方法只能只能水平居中（并没有margin: auto 0这类写法）。另外需注意，必须设置元素的宽度才能实现居中！利用此方法若要实现img等行内元素居中需要加上display: block。

方法三：根据margin: auto 实现居中：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#container{
position: relative;
width: 500px;
height: 500px;
background-color: red;
}
#div1{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 200px;
height: 200px;
margin: auto;
background-color: #69f;
}
</style>
</head>
<body>
<div id="container">
<div id="div1"></div>
</div>
</body>
</html>


方法四：利用text-align: center;实现块级元素内部的行内元素水平居中：

<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
border: 0;
}
#container{
width: 400px;
height: 300px;
background-color: #ABC;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<img src="./1.jpg" alt="">
</div>
</body>
</html>


首先应当注意：

text-align: center;只作用于块级元素。但它不会控制元素的对齐，而只是影响元素内部内容。

如代码所示，text-align: center;作用于#container,但是使其内部的img元素（注意此处若是块级元素则不会居中）水平居中了。

方法五：利用vertical-align: middle; 实现垂直居中：

首先应当注意：

vertical-align: middle;只影响行内元素元素和替换元素，不影响块级元素中的内容对齐（和text-align截然不同）。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

现在，考虑一个问题，让一张图片在整个屏幕上居中：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
width:100%;
height:100%;
}
#container{
width:100%;
height:100%;
background: #ABC;
text-align: center;
}
img{
vertical-align: middle;
}
</style>
</head>
<body>
<div id="container">
<img src="./1.jpg" alt=""/>
</div>
</body>
</html>


运行以上代码，会发现，container的高度并没有占到整个屏幕。修改如下

给html元素也加上 height:100%;或者给container加上position: absolute。

现在，图片水平居中了，但没有垂直居中，代码做如下修改后就可以实现垂直也居中了。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
width:100%;
height:100%;
}
#container{
position: absolute;
width:100%;
height:100%;
background: #ABC;
text-align: center;
}
img{
vertical-align: middle;
}
</style>
</head>
<body>
<div id="container">
<span style="vertical-align:middle;display:inline-block;height:100%;"></span>
<img src="./1.jpg" alt=""/>
</div>
</body>
</html>


display:inline-block是为了能够给span设置宽高，但是又不会产生换行。加上span并且也设置vertical-align:middle后，span和img 的中线就会对齐，从而实现效果img垂直居中。

方法六：根据display: table-cell 和 vertical-align: middle

vertical-align这个属性会设置单元格框中的单元格内容的对齐方式。

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
width:100%;
height:100%;
}
#container{
display: table-cell;
width: 500px;
height: 500px;
text-align: center;
vertical-align: middle;
background-color: green;
}
#center{
display: inline-block;
width: 300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<div id="center"></div>
</div>
</body>
</html>


通过添加display: table-cell;使得container变为表格元素，从而可以直接使用vertical-align: middle实现垂直居中。

方法七：根据CSS3属性display: box

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#container{
width:500px;
height: 500px;
background-color:green;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align:center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack:center;
}
#center{
width:300px;
height:300px;
background-color:blue;
}
</style>
</head>
<body>
<div id="container">
<div id="center"></div>
</div>
</body>
</html>


（先写到这里吧，笔记整理）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  块级元素 行内元素 居中显示 css
相关文章推荐
新的分享
章节导航