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

使用CSS实现上下左右居中

2017-07-25 19:51 337 查看

1、左右居中

使用纯CSS实现左右居中的经典方法是将被居中元素的margin值左右设置为auto，如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>左右居中</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.parent{
width: 80%;
height: 400px;/*固定高度只为结果直观，高度可自动*/
margin: 0 auto;/*父元素相对于浏览器窗口左右居中*/
background: #DEC2C2;
}
.child{
width: 200px;
height: 400px;
margin: 0 auto;/*子元素相对于父元素左右居中*/
background: #65AC6B;

4000
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
左右居中
</div>
</div>
</body>
</html>

结果如图：

2、上下左右居中

（1）被居中元素宽高已知

只要使得父元素相对定位，子元素绝对定位，子元素的top和left都为50%，margin-top和margin-left分别为宽高的负一半即可。

<!--上下左右居中-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIV上下左右居中</title>
<style type="text/css">
*{/*实现div的上下左右居中*/
margin: 0;
padding: 0;
}/*清除格式*/
.div0{
height: 1000px;
width: 800px;
position: relative;/*父元素相对定位*/
background: #678680;
}
.div1{
position: absolute;/*子元素绝对定位*/
height: 240px;
width: 300px;
/*overflow: hidden;*//*可使得多出块元素的文本隐藏*/
top: 50%;
left: 50%;
margin-top: -120px;/*高的一半*/
margin-left: -150px;/*宽的一半*/
border: 5px solid #E58B8B;
text-align: center;
}
.div1 p{
font-size: 36px;
}
</style>
</head>
<body>
<div class="div0">
<div class="div1">
<p>hello world!</p>
<p>hello world!</p>
</div>
</div>
</body>
</html>

（2）被居中元素宽高未知

<!--上下左右居中-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下左右居中</title>
<style type="text/css">
*{/*实现div的上下左右居中*/
margin: 0;
padding: 0;
}/*清除格式*/
.div0{
height: 500px;
width: 500px;
position: relative;/*父元素相对定位*/
background: #678680;
}
.div1{/*被居中元素宽高未知*/
position: absolute;/*子元素绝对定位*/
top: 100px;
bottom: 100px;
left: 200px;
right: 200px;/*设置上下左右撑开以居中*/
background: #E3A5A5;
text-align: center;
}
</style>
</head>
<body>
<div class="div0">
<div class="div1">
</div>
</div>
</body>
</html>

结果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航